This is one of those really annoying CSS bugs that should be so simple to do but is actually fairly problematic because of old browsers like IE6. Vertical-align should be all that’s needed but nope, certain browsers like IE6 don’t support it so we need to do some wizardry to get it to work cross browser. In this post I will talk about one lines and the more tricky wrapping of text.

Before I begin it is important to understand that the parent of a positioned child must also be positioned. In easy-to-understand terms that means the immediate outer div must have a position set for the inner positioned div to correctly work.

For one line of text I would make sure the parent element had a position of relative and then use the following code:

.example1, .example2 {
background-color: gray;
line-height: 200px;
vertical-align: middle;
}
.example2 img{
height: 200px;
width: 200px;
vertical-align: middle; }

With the html:

<h2>Just Text</h2> <p class="example1">Vertically centred text</p>
<h2>Text plus image</h2>
<p class="example2">Vertically centred text & image <img src="http://www.simonday.com/img/image.jpg" alt="image" height="200" width="200" /></p>
This is the code at its most basic level to show it works. BUT…what if I wanted two lines of vertically centred text? Now it gets complicated. I don’t like using JS for answers and after a good hunt around for a solid solution I got close but not close enough so I sat down and bug fixed until I came up with this:

* {margin:0;padding:0;}

#wrapper {
width:550px;
height:200px;
padding:10px;
margin:10px;
border:1px solid black;}

#fixed {
width:200px;
height:200px;
float:right;
background:gray;
display:block;}

/*display:table for Mozilla & Opera*/
#wrapper>#floating {
display:table;
position:static;}

/*for IE*/
#floating {width:300px;
height:100%;
background:#EAEAEA;
position:relative;}

/*for IE*/
#floating div {	position:absolute;
top:40%;}

/*for Mozilla and Opera*/
#floating>div {
display:table-cell;
vertical-align:middle;
position:static;
}
#floating div div {position:relative;}

* html #floating div div { top:0%;}

And the html of:

<div id="wrapper">
<img src="http://www.simonday.com/img/image.jpg" alt="stuff" id="fixed" />
<div id="floating"><div><div>
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
</div></div></div>
</div>

Ok so the things I hate about this are I’ve had to use a redundant div and a hack. I could style the P tag but if I needed to add other content to the child I would have to resort to the extra div. Either way there is more mark-up that I would like but it does the job without the need for JavaScript.

I can’t see a way of removing the almost unnecessary IE6 hack but without it either IE6 positioned incorrectly or IE7 does. There could be an easier way but this is what I’ve come up with so far this morning.

Network with Simon on LinkedIn ~ Twitter ~ Facebook ~ freelancer homepage.

Bookmark It

Hide Sites