How to vertically align both image and text in a DIV using CSS?

Question

I have an image and some text inside a div and I\'d like to put the image and the text in the vertical center of the div using CSS. The problem is that I don\'t know how man

Answer 1

Give both the image and the text a vertical-align: middle - the text needs to be contained in an element that is also display: inline. So markup like this:

  
  text text text


div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

should work. Here's a jsfiddle to demonstrate (edited fiddle to show everything is vertically aligned within a container as well.)

EDIT: to get the behavior you want, I recommend using additional display properties - table for the container and table-cell for the contained elements. Fiddle link has been updated with the changes.

EDIT: the only way I could think of to get it to work was to wrap the image in another inline container, in this case a span. I've updated the fiddle to demonstrate.