Why this text not centered vertically?

HTML & CSS
1

Hi guys,

Try to look at this page.
http://coder9.com/jazportfolio/admin/admin/

As you can see the “jazPortfolio” text is not centered vertically.
I already tried centering it using <td valign=“middle”>
but unfortunately it won’t.

Can anyone explain to me please.

By the way the codes of the css is below,


#admins { 
	font-family: 'Arial Black';
	background-color: #333;
	color: white;
	text-decoration: none;
	word-spacing: normal;
	text-align: left;
	letter-spacing: 0;
	line-height: 0.5em;
	font-size: 8em;
	margin: 0px;
	padding: 0px;	
}

Can you spot the not?

Thank you very much in advanced.

2

Temporarily I used image to center.
But just in case you know the reason please let me know, thanks.

3

It would be better not to use a <table> here. But anyhow, by having the various parts of the form in table rows like that, you are basically ruling out any nice centering effect.

An alternative would be to set the #adminpassform div to display: table and then center the form neatly inside that …

4

solidcodes,

Give this guess a try and see if it comes close.


#admins { 
    font-family: 'Arial Black';
    background-color: #333;
    color: white;
    text-decoration: none;
    word-spacing: normal;
    text-align: left;
    letter-spacing: 0;
    font-size:[color=blue]6.6em[/color];    /* changed to match your image */
    line-height:1em;
    margin: 0px;
    padding: 0px;
    [color=blue]margin-top:-.25em;[/color]    /* added. */
}

Note lots of changes/deletions in the HTML for the table dimensions and alignment.


<div id="header">
    <table align="center" width="" height="" border="0">
        <tr>
            <td width="" valign="" align="">
                <div><img name="icongear" src="http://coder9.com/jazportfolio/icons/icon-gear.png" width="146" height="146" alt=""></div>
            </td>
            <td width="" valign="" style="padding-left:60px;">
                <p id="admins" style="">jazPortfolio</p>
            </td>
        </tr>
    </table>
</div>