vertical-align: middle not working

[gib65]

Hello,

I'm trying to vertically align my text inside a div. The div itself is inside a table cell. But the text is not vertically aligned.

Here's a screen shot of the HTML after hitting F12 in IE:

5581

The div I'm interested in is the one with id="moduleTemplate0".

Here is the CSS:



table.gridTable {
animation-duration: 1s;
animation-name: activateObjective;
animation-timing-function: ease-in;
animation-iteration-count: 1;
}

.gridModuleNameColumn
{
background-color: #0072C5;
padding-left: 0px; /*10px;*/
padding-right: 0px; /*10px;*/
padding-top: 0;
padding-bottom: 0;
margin: 0;
position: relative;
width: 240px;
/*border-top: 1px solid black;
border-left: 1px solid black;*/
}

.gridModuleNameColumn > div.textStyle {
font-size: 1.3em;
color: #FFFFFF;
}

.moduleBorder
{
height: 43px;
border-top: 1px solid black;
border-left: 1px solid black;
padding-left: 10px;
vertical-align: middle;
}


Can anyone tell me why vertical-align: middle isn't working in .moduleBorder?

[FrickenTrevor]

What version of IE are you using? Also is there any link to a site to see the full code?

[Beverleyh]

Apply it to the td rather than contents. http://www.w3schools.com/css/css_table.asp

If you need more help, please provide a link to your page.

[jscheuer1]

Also, bear in mind that vertical-align is one of those dual purpose properties. As Beverley points out - it's a bit more consistent as a property of a table cell (td or th) - but only as regards inline elements that are the cell's immediate children (assuming there's adequate space, etc.), without block level elements being in the cell (that can often throw it off). In my experience it has more use (since tables are generally discouraged in layout except for tabular data) in it's other role, which is as a sort of relative property among two or (usually more effective, even) more inline elements. Say you have three spans in a row, or a span followed by an a then another span. Making the element in the middle vertical-align: middle should center it vertically relative to the two surrounding inline elements. If these (the surrounding inline elements) have a common apparent height, the effect can be good.

Bottom line - in my opinion, you're right. It doesn't work. You can work it to good effect in certain limited situations.

Using margin and/or padding of both the element(s) you're concerned with and its/their parent are often more effective, especially if they're block level or can be made display: block.

One final thing on this for now - even given all I've put forth, different browsers can sometimes render vertical-align differently. It's not something to be relied upon for anything requiring precise layout. Luckily - very few things do, or at least very few things should require precise layout.