Home/ Questions/Q 131105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T06:03:11+00:00

Why won’t vertical-align: middle work? And yet, vertical-align: top does work. span{ vertical-align: middle;

  • 0

Why won’t vertical-align: middle work? And yet, vertical-align: top does work.

span{   vertical-align: middle; }
<div>   <img src='https://via.placeholder.com/30' alt='small img' />   <span>Doesn't work.</span> </div>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Actually, in this case it’s quite simple: apply the vertical align to the image. Since it’s all in one line, it’s really the image you want aligned, not the text.

    <!-- moved 'vertical-align:middle' style from span to img --> <div>   <img style='vertical-align:middle' src='https://via.placeholder.com/60x60' alt='A grey image showing text 60 x 60'>   <span style=''>Works.</span> </div>

    Tested in FF3.

    Now you can use flexbox for this type of layout.

    .box {    display: flex;    align-items:center; }
    <div class='box'>     <img src='https://via.placeholder.com/60x60'>     <span style=''>Works.</span> </div>

    • 0