SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Middle Alignment With CSS Possible?

    Is there any way to align an object in the middle of a page vertically using CSS?

    Thanks,
    Josh

  2. #2
    SitePoint Zealot Skibum1321's Avatar
    Join Date
    Jun 2003
    Location
    Malden, MA
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vertical-align
    Keith Rousseau

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, it didn't work. Seems like it should have, though.

    Josh

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Skibum1321
    vertical-align
    Vertical-align only works for table cells and inline elements (i.e. <span>). Basically if text in the element is of different sizes in an inline element, vertical-align is how/where the text lines up, i.e. with "baseline", the bottom of all text is together, regardless of font size. To vertically center an element, you have to play around with top and bottom margins/padding.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    To vertically center an element, you have to play around with top and bottom margins/padding.
    That's what I was afraid of. So in reality, I can only truly center the element for one resolution?

    Josh

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know how reliable this is but it seems to work in IE6, Mozilla 1.2, Opera 6.03 and Netscape 6.2.
    This will centre an image vertically and horizontally but you do need to know the size of the element beforehand.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Centre image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {
     height: 100%; 
    }
    img {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -30px; /* make this half your image height */
     margin-left: -30px; /* make this half your image width */
    }
    </style>
    </head>
    <body>
    <div ><img src="img.gif" width="60" height="60" /></div>
    </body>
    </html>
    The idea is to set the body to 100% to give the image a container to find the centre of. The image is absolutely positioned 50% from the top and 50% from the left. The left and top margins of the image is then set to minus half the image width and height which should drag it back to centre (theoretically).
    I don't know if this works in IE5 but it works in IE6 in quirks mode so it might work??

  7. #7
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help!

    Below is what maybe I'm looking for.. Is it possible to absolute align a table around that image? Maybe a bit silly..

    How is it possible to absolute an image vertically/horizontaly just to the left, maybe like below;

    Code:
    <style type="text/css">
    html,body {
     height: 100%; 
    }
    img.image_left {
     position: absolute;
     left: 25%;
     top: 50%;
     margin-top: -30px; /* make this half your image height */
     margin-left: -30px; /* make this half your image width */
    }
    </style>
    <div ><img class="image_left" src="img.gif" width="60" height="60" /></div>
    Then an image using similar to the above to the top-right and bottom right of the page, and an <B>form</B> to the absolute middle-right?

    Only for 800x600 and 1028x768, IE5+ users. Pls help.
    Thanks

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Is it possible to absolute align a table around that image
    Well you could align the table in the same way that the image was aligned and then put the image in it. Not sure why you'd want to (and we're trying to avoid tables aren't we.)

    I'm not sure what you want but here are a few images aligned in various places that may give you an idea. (Only checked in IE6 but I assume Ie5 will be ok).


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
     height: 100%; 
     margin:0%;padding:0%;
    }
    img.image_left {
     position: absolute;
     top: 50%;
     left:0%;
     background:yellow;
     width:60px;
     height:60px;
     margin-top: -30px; /* make this half your image height */
    }
    .image_topright {
     position: absolute;
     right:0%;
     top: 0%;
     width:60px;
     height:60px;
     background:yellow;
    }
    .image_bottomright{
     position: absolute;
     right:0%;
     bottom:0%;
     width:60px;
     height:60px;
     background:yellow;
    }
    .image_rightmiddle {
     position: absolute;
     right:0%;
     top: 50%;
     width:60px;
     height:60px;
     margin-top: -30px; /* make this half your image height */
     background:yellow;
    }
    .image_deadcentre {
     position: absolute;
     top: 50%;
     left:50%;
     width:60px;
     height:60px;
     margin-top: -30px; /* make this half your image height */
     margin-left: -30px; /* make this half your image height */
     background:yellow;
    }
    </style>
    </head>
    <body>
    <div ><img class="image_left" src="img.gif" width="60" height="60" /></div>
    <div ><img class="image_bottomright" src="img.gif" width="60" height="60" /></div>
    <div ><img class="image_topright" src="img.gif" width="60" height="60" /></div>
    <div ><img class="image_rightmiddle" src="img.gif" width="60" height="60" /></div>
    <div ><img class="image_deadcentre" src="img.gif" width="60" height="60" /></div>
    </body>
    </html>
    Hope this helps.

    Paul

  9. #9
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul can you apply vertical align to LI element?

    I want my text to be vertical align in the list navigation, and to have some right padding so it's not against the edge, but i run into problem of expanding the width if i add padding to LI.

    url here

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the text to be in the centre of the coloured background in the list then you can get around it by setting the line height to the same height as the element. This will automatically centre the text (although this may be frowned upon by some designers and may be buggy in older browsers) but I think it should be ok in this case.

    If you don't want to apply the padding to the list then you will need to supply an inner element to apply margin or padding to such as a span.

    Here is one solution:

    Css changes:
    Code:
    #navcontainer li { margin: 10px 0 10px 0;
    	 width: 130px;
    	 height:20px;
    	 text-align: right;
    	 line-height:20px;
    	}
    #navcontainer li span {
     margin-right:10px;
    }


    Html:
    Code:
    <ul id="navlist">
    <li id="active"><a href="#" id="current"><span>Structure</span></a></li>
    <li><a href="#"><span>Members</span></a></li>
    <li><a href="#"><span>Committees</span></a></li>
    <li><a href="#"><span>Legislation</span></a></li>
    <li><a href="#"><span>Publications</span></a></li>
    <li><a href="#"><span>Activities</span></a></li>
    <li><a href="#"><span>Calendar</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
    Hope that's what you meant.

    Paul

  11. #11
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you again Paul.

  12. #12
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I absolute a form anywhere on the page? Basically, here is what I have so far..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>TEST!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html,body { background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    
    }
    
    table.outer {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border: 0px;
    }
    
    table.inner {
    width: 50%;
    height: 100%;
    vertical-align: middle;
    border: 0px;
    }
    
    img.image_left {
     position: absolute;
     left: 30%;
     top: 50%;
     margin-top: -200px; /* make this half your image height */
     margin-left: -200px; /* make this half your image width */
    }
    
    img.image_topright {
     position: absolute;
     left: 75%;
     top: 25%;
     margin-top: -25px; /* make this half your image height */
     margin-left: -54px; /* make this half your image width */
    }
    
    img.image_bottomright {
     position: absolute;
     left: 75%;
     top: 75%;
     margin-top: -25px; /* make this half your image height */
     margin-left: -54px; /* make this half your image width */
    }
    
    img.image_enter {
     position: absolute;
     left: 75%;
     top: 35%;
     margin-top: -15px; /* make this half your image height */
     margin-left: -86px; /* make this half your image width */
    }
    
    input.login {
    border: 2px;
    background-color: #e2f6ba;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 8pt;
    font-weight: normal;
    }
    
    p,th,td { text-align: left; /*to counter the workaround above and align the text to the left, otherwise all the text will be center-aligned */} 
    
    </style>
    </head>
    <body>
    
    <div><img class="image_left" src="start2.gif" width="400" height="400" border="0" /></div>
    <div><img class="image_topright" src="loohire_small.gif" width="104" height="50" border="0" /></div>
    <div><img class="image_bottomright" src="fencehire_small.gif" width="104" height="50" border="0" /></div>
    <div><img class="image_enter" src="please-enter.gif" width="172" height="30" alt="Please enter your username and password below." border="0"></div>
    
    <table class="outer">
    <tr>
    <td valign="center" align="center" style="vertical-align:middle">
    
        <table border="2" class="inner">
                <tr>
                    <td valign="center">
    
    		<table border="0" cellspacing="5" cellpadding="0">
    		<tr>
    		<td valign="center" align="right">
    		<form method="POST" action="login.els">
    		Username:</td>
    		<td valign="center">
    		<input class="login" type="text" name="LOGIN_NAME" AUTOCOMPLETE="off" size="20" maxlength="30" class="login" />
    		</td>
    		</tr>
    		<tr>
    		<td valign="center" align="right">
    		Password:</td>
    		<td valign="center">
    		<input class="login" type="password" name="LOGIN_PASSWORD" AUTOCOMPLETE="off" size="20" maxlength="30" class="login" />
    		</td>
    		</tr>
    		<tr>
    		<td colspan="2" align="center" valign="center">
    
    		<br/><p align="center">
    		<input class="login" type="submit" value="Login" size="35" class="login" />
    		<input class="login" type="reset" value="Clear" size="35" class="login" />
    		</p>
    		</form>
    		</td>
    		</tr>
    		</table>
                    </td>
                </tr>
            </tbody>
        </table>
    
    </td>
    </tr>
    </table>
    
    </body>
    </html>
    The images align fine in IE5, IE6 - but the FORM will not align to the right in either browser.


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
  •