Question

I’m basically trying to create a 2 column div with a liquid <h1> and another div that will span the entire height of the <h1>, but I’d like the vertical-alignment to be centered. I’m basically trying to place an image to the left of a page title:

<div class="outer">
   <div><img src="pound.png" /></div>
   <h1>This is text that is really long. This is text that is really long.  This is text that is really long.  This is text that is really long.  This is text that is really long.</h1>
</div>

Here is an example; I don’t really want to use tables because I’d like to be able to float the image to the right side in certain situations. I also don’t care about the borders, I’m just doing it to illustrate the alignment.

------------------------------------------------------
        |  This is text that is really long. This is 
######  |  text that is really long. This is text that
######  |  is really long. This is text that is really
######  |  long. This is text that is really long. This 
        |  is text that is really long.
------------------------------------------------------

My main issue is getting the image to occupy the entire space vertically so that I can vertically align it using margin: 50% or auto or some variation of that. I can either get the image centered vertically, but then the text wraps around it, or I can get the text to not wrap, but then the image is vertically aligned.

Answer 1

Browser support is currently a bit limited, but you can try using the box-align css property for the vertical alignment of your image and text. More here.