Trouble with Vert Alignment

Does vertical alignment work with DIVs?

[paulpsd]

I've got some graphical icons, and I want text links to sit on top of them. The way I'm handling it is that I've got one style that controls the general appearance of the icons (margins and alignment), and then I've got individual styles for each type of icon, which contains the icon as a background image. I want the link text to be vertically aligned in the middle over the icon.

Here's the CSS I'm using:

// This sets global properties for all icons
div.icon {
padding-top: 3px;
text-align: left;
vertical-align: middle;
}

// This sets properties for one specific icon
div.icon_exec_blue {
background-image: url(../grafix/icons/icon_blue.gif);
background-repeat: no-repeat;
}

// This sets properties for how text is displayed over the icon
.icon div {
text-align: inherit;
vertical-align: inherit;
padding-left: 33px;
padding-top: 0px;
margin-right: -33px;
width: 153px;
height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 11px;
}

Now here's the HTML:

<div class="icon"><div class="icon_exec_blue"><a href="#">Executive Moves</a></div></div>

The result is that my text "Executive Moves" is aligned at the top, not the middle.

In looking through my Eric Meyer CSS book, it says the property vertical-align works in table cells or text within a line. However, this is a div, which perhaps means that vertical-align won't work.

Any idea what I'm doing wrong, or a workaround?

[iamlost]

However, this is a div, which perhaps means that vertical-align won't work.

Correct.
There is no easy method but when you set a explicit height as you do in this instance the easiest is likely to use line height:

Revised CSS:

.icon {padding-top: 3px; text-align: left;
} /* removed vertical-align: middle; */

.icon div {text-align: center;
/* added to center text horizontally - remove if not wanted */
padding: 0; margin: 0;
/* zeroed all padding/margins - adjust as desired */
/* Note: I use: * {padding: 0; margin: 0;} as first style listing to zero all default browser margins and then only need to specify explicit ones desired - personal choice. */
width: 153px;
height: 30px;
font: 10px/25px Verdana, Arial, Helvetica, sans-serif;
/* changed font declaration to short form. Note 25px line-height */
}

div.icon_exec_blue {background-image: #00f url(../grafix/icons/icon_blue.gif) no-repeat;
} /* changed background to short form and added backup colour in case image didn't load/wasn't available */

Regarding the 25px line-height to vertically center text: Total height is 30px. Font-height is 10px. Center is a line-height equal to total height (30px) less half the font height (10/2 = 5) or 25px.

Note: If centering multiple lines of text or total height is fluid text centering approaches vary somewhat. At this point vertical centering is not as simple as horizontal centering. But it can be done.

[paulpsd]

Thanks for that. Yes, I was originally attempting to handle this with line-height. However, the number of lines of text contained in the <div> is not consistent. Sometimes it's 1 line, sometimes it's 2 lines. I was hoping vertical-align would take care of the whole thing.

So if I go back to using line-height, then perhaps I should create 2 styles: 1 that handles 1 lines of text, and another that handles 2 lines of text. Is that what you would do?

Also, I've got a question about this:

<<font: 10px/25px Verdana, Arial, Helvetica, sans-serif;>>

Is that the shorthand way of specifying line height, to put it after a slash after the font size? If so, I've never seen that. Let me know.