Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What's a quick way to center content on the page (also vertically?)

    It's been a long time since I've done anything with HTML, but I'm wanting to create a very quick and simple HTML site to show how this would feel like before getting it animated.

    www.eggo.us/ya/dec13

    It's so simple that I'm using shortcuts for a lot of things. Right now, all of the content is on a table and I'm looking to center it horizontally and also vertically.

    Is it as simple as making a table that spans across the whole page and having the content in a <td valign="center"> or something?

    Also is there a way to get something that will always be in the bottom of the page? Some sort of footer positioning.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Get rid of all table used for your layout and follow Dead Center
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Geruvah,

    the problem with our friend abduraooft's Dead Center suggestion is that
    the centered content moves out of view when the page size is reduced.

    Here is an example that avoids that problem...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Horizontally and vertically centered block</title>
    
    <style type="text/css">
    html,body{
        height:100%;
        margin:0;
        padding:0;
     }
    body {
        min-width:760px;         /* this is the #hov div width */
        min-height:400px;        /* this is the #hov div height */
        background-color:#eae7d7;
        text-align:center;
     }
    #vertical{
        width:100%;
        height:50%;
        margin-top:-200px;     /* half vertical height of the #hoz div */
        float:left;
    }
    #hoz {
        width:734px;
        height:374px;
        padding:10px;
        margin:auto;
        border:3px double #000;
        background-color:#fff;
        overflow:auto;         /* allow content to scroll inside element */
        clear:both;
    }
    #hoz p {
        margin:0;
        padding:10px;
        text-align:justify;
     }
    </style>
    
    </head>
    <body>
    
    <div id="vertical"></div>
    <div id="hoz">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p>
    </div>
    </body>
    
    </html>
    
    
    coothead

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Geruvah,
    These quick changes to your layout will center it - Add the bits highligted in red.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>template</title>
    <style type="text/css"> 
    #measure {
    height: 50%;
    width: 1px;
    float: left;
    margin: 0 0 -384px 0;
    }
    #centered {
    width: 1024px;
    margin: 0 auto;
    clear: left;
    border: 3px solid #fff;
    }
    </style>
    </head>
    <body bgcolor="#201d18" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (template.psd) -->
    <div id="measure"></div>
    <div id="centered">
    <!--<div align="center">-->
    
    <table id="Main" width="1024" border="0" cellpadding="0" cellspacing="0" height="768">
    	<tbody><tr>
    		<td colspan="8" width="1024" background="images/template_01.gif" bgcolor="#201d18" height="33">
    			</td>
    	</tr>
    	<tr>
    		
            <td width="234" background="images/template_02.gif" height="23">
    		</td>
    Have a look at the link in my sig about DocTypes to explain what that first bit is doing.
    Also check out the links about validating as well. Validating will help you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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