Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center;
and line-height:90px
have proven ineffective.
Removing the image allows for the successful use of line-height:90px
, leading to suspicions that the image is impacting the baseline of the div.
If possible, looking for solutions that do not involve flexbox.
Sample code provided:
.menubuttons{
height:90px;
background-color: red;
font-size:30px;
/*my unsuccessful attempt at centering the text vertically*/
vertical-align: middle;
line-height:90px;
}
.menubuttons img{
height:50px;
margin:20px;
}
<div class="menubuttons"><img src='https://cdn-icons-png.flaticon.com/512/2111/2111806.png'/>Stack Overflow</div>