You almost got it there. All you need to do is remove the top and bottom padding and you should be good.
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! đŸ™‚
http://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: http://css-tricks.com/centering-in-the-unknown/
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!
