SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Why this text not centered vertically?

    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,
    Code:
    #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.
    I Love coding...
    Don't click this link.

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Temporarily I used image to center.
    But just in case you know the reason please let me know, thanks.
    I Love coding...
    Don't click this link.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    solidcodes,

    Give this guess a try and see if it comes close.
    Code:
    #admins { 
        font-family: 'Arial Black';
        background-color: #333;
        color: white;
        text-decoration: none;
        word-spacing: normal;
        text-align: left;
        letter-spacing: 0;
        font-size:6.6em;    /* changed to match your image */
        line-height:1em;
        margin: 0px;
        padding: 0px;
        margin-top:-.25em;    /* added. */
    }
    Note lots of changes/deletions in the HTML for the table dimensions and alignment.
    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •