title: How to vertically align both image and text in a DIV using CSS?
body: <p>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:</p>
  
  <pre><code>####################################
  #  _______                         #
  # |       |                        #
  # |       |                        #
  # | IMAGE |    text text text      #
  # |       |                        #
  # |_______|                        #
  #                                  #
  ####################################
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>####################################
  #                                  #
  #              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      #
  #                                  #
  ####################################
  </code></pre>
  
  <p>I'm in trouble to get this effect, is there any way without using javascript to do this?</p>
  
  <p>Obs. The parent div of the div I'm referring to have position:relative so there's another problem.</p>