Vertical Centering of Text Not Working -- Help! :-)

(I've used knock-off CSS designs for a while, but now I am trying to begin understanding, and building from the ground up.)

I am starting with a hybrid -- tables/CSS.

Please see:
http://www.wpn.org/churkendoose/

The button cells have divs to establish size and formatting.

But I want the text vertically centered.

I tried vertical alignment of text in every way I can think of?

What will work, and what did I do wrong?

MANY thanks,
~Louie.

 

What do you mean, 'vertically centered'? Do you mean slap-bang in the middle of the page? If that's what you mean you either need to make up some additional css but define the height - kind of like an invisible box that pushes the text down a bit - or use a table, again defining a height so the text gets pushed down the page to where you want it to appear.

If that's not what you mean, perhaps you could explain a little bit more?

 

Thanks, mcfox,

I just want the text in the button cells to be in the "middle" vertically.

Left justified horizontally, and centered vertically, within the table cell for each button, respectively.

Is that clearer?

---------------------------
|
|
| Button Link Text
|
|
---------------------------


Many thanks,
~Louie.

 

For some reason I can't seem to figure this out. :/

 

It's a bit tricky to say the least, there are two ways of doing this, however, neither worked perfectly. So I had to find a compromise which I will explain below. Here is your new CSS code:

#dim_nav_btn {
	padding: 5px;
	height: 40px;
	width: 145px;
	vertical-align: middle;
	line-height:40px;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.btn_txt_grn {
	color: #11867E;
}
.btn_txt_wht1 {     /* Use this class if your button has 1 lines of text */
	color: #FFFFFF;
} 
.btn_txt_wht2 {     /* Use this class if your button has 2 lines of text */
	color: #FFFFFF;
	line-height:17px!important;
}

Code (markup):

I cleaned it up as you had a lot of redundant code in the classes, I moved those into the div class which will be applied to the subclasses anyway. I also changed your div class, to a div ID, which allows for cleaner html code.

Here is your new HTML Code for the buttons area:

<table border="0" align="center" cellpadding="0" cellspacing="5">
  <tr>
    <td width="240" rowspan="2" align="center" valign="middle" bgcolor="#FFF7DC"><img src="images/TCP3282c2_web.gif" alt="TCP_Logo" width="225" height="67" /></td>
    <td width="155" valign="middle" bgcolor="#ED7B17"><div id="dim_nav_btn" class="btn_txt_wht2">Who we are<br />and what we do</div></td>
    <td width="155" valign="middle" bgcolor="#FFF7DC"><div id="dim_nav_btn" class="btn_txt_grn">How to Donate</div></td>
    <td width="157" valign="middle" bgcolor="#11867E"><div id="dim_nav_btn" class="btn_txt_wht2">How to apply for <br /> grants &amp; scholarships</div></td>
  </tr>
  <tr>
    <td bgcolor="#11867E"><div id="dim_nav_btn" class="btn_txt_wht1">Contact Us</div></td>
    <td bgcolor="#ED7B17"><div id="dim_nav_btn" class="btn_txt_wht1">Resources</div></td>
    <td bgcolor="#FFF7DC"><div id="dim_nav_btn" class="btn_txt_grn">Links</div></td>
  </tr>
</table>

Code (markup):

I removed a lot of useless code in there aswell, and as you can see the I also removed the span and merged the class with the div. It should be fairly straight forward, but let me know if this is what you wanted.

The only problem you face now is converting the CSS so that it applies to links since the buttons are not linkable yet.

Here's a helpful guide if you want more examples;
http://www.student.oulu.fi/~laurirai/www/css/middle/

 

Thanks folks, especially GWiz!!

(Need your dojo swept? Just call me!!)

Your code works, and it looks like the link might give more insight.

It looks like this is one of those "voodoo" areas of CSS, where code does not do as advertised.

For the life of me, I still do not 'get' why what I had would not work!!

Many thanks,
~Louie.

 

The only reason I could find was that you didn't specify a line-height attribute, because apparently it cannot center itself if it doesn't know the limits of the box, and it doesn't read the height attribute, only the line-height. The problem with line-height is that you have to be creative with the code depending on the context, which is why i had to create 2 separate types of code, one for 1 line of text, and another for 2 lines of text.