0

I have a div that contains an image and text. I'm trying to simply vertically align the text.

I've tried setting vertical-align: center; and line-height:90px, but neither seem to be having any effect.

If I remove the image, even just line-height:90px does the job, so I suspect it's something to do with the image affecting the baseline of the div.

If possible I'd prefer solutions without flexbox.

My code:

.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>

jsfiddle in case SO code snippet isn't added

Daavee18
  • 142
  • 8
  • `vertical-align` only vertical centers text within a table-cell. In every other element, it vertically centers within the line height. To vertically center a text within another element you need to use flexbox. – tacoshy Aug 23 '22 at 14:03
  • vertical-align need to go to the image not the text – Temani Afif Aug 23 '22 at 14:04
  • @tacoshy If it vertically centers within the line height, then why doesn't setting line height to the height of the div work? – Daavee18 Aug 23 '22 at 14:07
  • @TemaniAfif While this does move the text further up, it's still off center. – Daavee18 Aug 23 '22 at 14:07
  • because you didn't defined a smaller line height for the text itself: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height – tacoshy Aug 23 '22 at 14:11
  • because vertical-align: middle was never meant to center unlike everyone think. Read this: https://stackoverflow.com/a/60684019/8620333 – Temani Afif Aug 23 '22 at 14:12

1 Answers1

-1

Just add these two properties in .menubuttons

.menubuttons{ display:flex; align-items:center; }

Jahanzaib
  • 11
  • 2