Question

I am using a max-width attribute to force a new line. After the new line, the text goes to the bottom of the image instead of remaining in the middle.

CSS:

.description{
font:bold 16px Verdana, Helvetica, sans-serif;
color: #3D85A7;
margin: 0 auto 20px auto;
text-align:center;
max-width:500px;
}

.icon{
max-height: 90px;
max-width: 85px;
margin: 10px 0 10px 10px;
vertical-align:middle;
}​

HTML:

<div class="description">
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
</div>​

For a live example, view it on a JSFIDDLE here.

ADDED: Please also notice that my current css works well with short file names (the icon moves in and it stays centered). The answers so far have involved float:, which does not seem to work well with a shorter filename.

Answer 1

My solution would be to change the HTML to (adding <p> tag):

<div class="description">
  <p>
    <img class="icon" src="http://cleanfiles.net/images/pdf.png">
    This is a really really really really long file name.pdf
  </p>
</div>​

And then add the attribute float: leftto the picture.

EDIT:

Here is the link with the text centered (maybe not the best way but it works): http://jsfiddle.net/LXS6x/9/