Categories
alignment css html vertical-alignment

Vertically align text next to an image?

2175

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>

0

    2499

    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>

    1

    • 2

      The flex solution is better than the vertical-align solution because it handles the case of multiple lines of text also.

      Aug 9, 2021 at 21:43

    354

    Here are some simple techniques for vertical-align:

    One-line vertical-align:middle

    This one is easy: set the line-height of the text element to equal that of the container

    <div>
      <img style="width:30px; height:30px;">
      <span style="line-height:30px;">Doesn't work.</span>
    </div>
    

    Multiple-lines vertical-align:bottom

    Absolutely position an inner div relative to its container

    <div style="position:relative;width:30px;height:60px;">
      <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
    </div>
    

    Multiple-lines vertical-align:middle

    <div style="display:table;width:30px;height:60px;">
      <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
    </div>
    

    If you must support ancient versions of IE <= 7

    In order to get this to work correctly across the board, you’ll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn’t support: advanced CSS selectors.

    <style type="text/css">
      #container {
        width: 30px;
        height: 60px;
        position: relative;
      }
      #wrapper > #container {
        display: table;
        position: static;
      }
      #container div {
        position: absolute;
        top: 50%;
      }
      #container div div {
        position: relative;
        top: -50%;
      }
      #container > div {
        display: table-cell;
        vertical-align: middle;
        position: static;
      }
    </style>
    
    <div id="wrapper">
      <div id="container">
        <div><div><p>Works in everything!</p></div></div>
      </div>
    </div>
    

    Variable container height vertical-align:middle

    This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)

    Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    

    1

    • 16

      The display:table and display:table-cell CSS selectors work great, except, of course, in IE7 and below. After tearing my hair out for several hours, I decided that I didn’t really need to deal with anyone that still used IE7-.

      – banncee

      Apr 3, 2013 at 13:51

    105

    Change your div into a flex container:

    div { display: flex; }
    

    Now there are two methods to center the alignments for all the content:

    Method 1:

    div { align-items: center; }
    

    DEMO


    Method 2:

    div * { margin: auto 0; }
    

    DEMO


    Try different width and height values on the img and different font size values on the span and you’ll see they always remain in the middle of the container.

    2

    • In order to center the text next to or between images (horizontally on the page), you need to also add justify-content: center; and for spacing (without using <br/> tags) you might also want to throw in a padding: 1em;. Great update for us modern browser devs.

      – CSS

      Dec 3, 2015 at 1:39


    • This worked well. I tried each and everyone of the other answers, and while they worked to a degree, it didn’t work for me. I had about 3 lines of text to align, and this answer worked perfectly. Thanks @Mori

      – semaj0

      May 24, 2016 at 13:58