I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
Based on a proposed a solution for a similar problem here, you can do something like this.
- Put the link texts inside spans.
- Give these spans
display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services { overflow: auto; padding: 17px 0 9px 0; } .main-services li { list-style: none; float: left; border-right: 1px dashed #E53B00; padding-right: 14px; } .main-services li a { display: block; height: 78px; color: #ED5D04; text-decoration: none; } .main-services li a img { vertical-align: middle; } .main-services li a span { display: inline-block; vertical-align: middle; } .service-1 span { width: 85px; } .service-2 span { width: 131px; } .service-3 span { width: 151px; }
<ul class="main-services border-common"> <li class="service-1"> <a href="#"> <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> <span>Some text goes here</span> </a> </li> <li class="service-2"> <a href="#"> <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> <span>More text here</span> </a> </li> <li class="service-3"> <a href="#"> <img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" /> <span>More text goes here but this text overruns</span> </a> </li> </ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div> <span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span> <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span> </div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
