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 many lines of text I will have but the text and the image must be ALWAYS in the middle. For example, when there’s only one line of text the div should look like this:

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################

If eventually I have more lines or the height of text is larger than the height of the image then the image should be aligned, just like this:

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

I’m in trouble to get this effect, is there any way without using javascript to do this?

Obs. The parent div of the div I’m referring to have position:relative so there’s another problem.

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:

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

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.