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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 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,533
    Mentioned
    62 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
  •