How to center large text with image? - html

Question

I have a sidebar that displays an icon and some text aligned. This sidebar is resizable and sometimes text and icon don't fit in the same line.
This jsfiddle shows an example. Blue button shows how it looks like when the line fits and orange button shows what happens when the text is too long.
My goal is to make it look like this when the line is too long:
It is text should stay at rigth side of the image vertically centered with it. No problem if I have to change HTML.

Answer 1

#Ivan; you can write like this http://jsfiddle.net/sandeep/UEk5b/15/
a, a:visited {
color: blue;
text-decoration: none;
display:table;
}
ul li a span {
display: inline-block;
width:102px;
vertical-align: middle;
}
display:table is not work in IE7 & below.
Edit
check this without display:table
http://jsfiddle.net/sandeep/UEk5b/19/

Answer 2

Try this way:
ul li {
cursor: pointer;
padding-left: 70px;
ul span {
vertical-align: middle;
display: inline-block;
}
ul img {
vertical-align: middle;
margin: 0 0 0 -70px;
}
http://jsbin.com/ogofun/5/edit#html,live

Answer 3

What you need is exactly described by html table elements:
<div id="resizable">
<ul>
<li>
<a href="#" class="ajax-page">
<table><tr><td valign="middle">
<img src="http://bit.ly/mRkUDB" alt="" width="60px" height="60px"/>
</td><td valign="middle">
<span>This is a test</span>
</td></tr></table>
</a>
</li>
<li>
<a href="#" class="ajax-page">
<table><tr><td valign="middle">
<img src="http://bit.ly/o7Elfp" alt="" width="60px" height="60px"/>
</td><td valign="middle">
<span>This is another larger test</span>
</td></tr></table>
</a>
</li>
</ul>
</div>
although you still might want different representation with different CSS styles or at low widths, in which case using tables might be a bad idea.