how to vertical align image to text

  • HI,

    I have set up a list of sorts with image numbers and i can’t seem to get the text to centre vertically with each images no matter i change in the CSS.

    This is the page:
    https://www.salesseoandsocialmedia.com/sales-seo-social-media-presents/

    This is the CSS i am using on the numbering images is:

    .webinar-number{
padding-right: 20px;
padding-top:10px;
padding-bottom:10px;
vertical-align: middle;
}

    How do I get the text along side each number to align vertically in the space? Is it possible?

    Thanks!
    Angie

Viewing 4 replies - 1 through 4 (of 4 total)

  • You almost got it there. All you need to do is remove the top and bottom padding and you should be good.

    Thread Starter BoldbyDesign

    (@boldbydesign)

    Thanks for your reply – I just did that but the text is still not centred with the number images….

    I have been reading up and found this as a solution also, but don’t actually know where to put it exactly or if it will work:

    <div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">Doesn't work in IE!</div>
</div>

    Any other ideas??
    Thanks! ??
    https://www.salesseoandsocialmedia.com/sales-seo-social-media-presents/

    Yeah so the issue is with the code. Basically the way that you can vertically center images within text is 1 to have the image inside the same block element as the text for example:

    <div>
 <img src="url-to-img" alt="Image" style="vertical-align: middle;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales.
</div>

    Else you if you are going to do it the way you just posted you need to do something like:

    <div style="display: table; height: 60px;">
    <div style="display: table-cell; height: 60px; vertical-align: middle;">
      <img src="url-to-img" alt="Image">
    </div>
    <div style="display: table-cell; height: 60px; vertical-align: middle;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales.
    </div>
</div>

    By the way I would recommend you don’t write your CSS inline unless you absolutely have to. You also will want to check out your code as you have over 30 validation issues.

    A good article on vertically aligning something centered is: https://css-tricks.com/centering-in-the-unknown/

    Thread Starter BoldbyDesign

    (@boldbydesign)

    Thank you!

    I have fixed it I think. Also taken a look at that article – it may help me with my header issue… (same problem getting things to align side by side…)

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how to vertical align image to text’ is closed to new replies.