Vertical Text Centering

[ByteWizard]

1) Is there some secret to gettting

vertical-align: middle

to work? I am trying to center some text horizontally and vertically in a div box. The height of the box is considerably larger than the text font and the text seems to align down from the top of the box by the amount of the default padding. How does one vertically center text within a container?

2) Is there a way to keep the a.button:hover text specifications NOT to completely overwrite the a.button text specifications? I tried to use a z-index of 90 in the a.button:hover specification and 100 in the a.button specification. The z-index of 90 completely overwrite the 100 ???

[DCElliott]

vertical align applies to block content relative to the line generating the block, not the parent container.

[ByteWizard]

This (http://www.westciv.com.au/style_master/academy/css_tutorial/properties/text_layout.html#vertical-align) is the syntax guide I have been depending on and it has been good to me so far. In the link above, it says
vertical-align can be specified using one of a set of keywords. These keywords work in one of two distinct ways. One group of keywords works relative to the parent element, while the other works relative to the line on which an element appears.... The keyword values which are relative to the parent element are

* baseline
* middle
* sub
* super
* text-top
* text-bottom

I have been using vertical-align: middle to attempt to center text inside a menu button that is approx 3 times the height of the font. The text is at the top of the button (<div>). Is the syntax guide wrong? I tried it in several browsers and they are consistent. I was trying to build a site without any images and wanted the mouse-over to be able to use the larger space of the button.

Confused as usual.

[DCElliott]

CSS Vertical centering is hard if you are trying to do static heights of block elements.

div.centered {
display:block;
width:10em;
height:auto;
padding:0.2em; /*vary this to change the amount of padding*/
text-align:center;
background:#666;
border:2px outset #999;
color:#eee;
}

will produce vertically centered "button" content because it allows the vertical padding to "grow" the vertical height of the box. As soon as you fix the vertical height, you lose that characteristic and catch yerself a heap of hurt.:mad:

Do a search on: css vertical center to get more info.

[DCElliott]

From another forum (http://www.webmasterworld.com/forum83/414.htm)
vertical-align doesn't work for this because that property is meant for aligning line items in a line box relative to one another (or aligning the contents of a table cell). It has no effect block-level elements like div. that is basically what I was trying to say with my previous post:vertical align applies to block content relative to the line generating the block, not the parent containeri.e. content is positioned relative to the text, not the block level element containing the text.

Having said that here is something ugly that works:The CSS:
a.button {
display:block;
width:10em;
height:3em;
background:#666;
border:2px outset #999;
text-decoration:none;
text-align:center;
line-height : .5em;
color:#eee;
}The HTML:<a class="button" href="xxx" ><br />Button</a>You can play around with other dimensions. WARNING: text wrapping ain't gonna be pretty.

[DCElliott]

DB

Unfortunately equal top and bottom doesn't work within a fixed size box. It will for horizontal, but not vertical. CSS simply has no property similar to <td valign="middle"> which will vertically center content in a box.

This is further dealt with here (http://www.nic.fi/~tapio1/Teaching/Specification.php3#centralization) in a discussion of what should be added to CSS3. (and is a great source of CSS discussion)

[ByteWizard]

I'm still off in my sandbox playing. I might get this sucker to work yet!
Thanks for the input.