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 7 of 7
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,413
    Thanks
    68
    Thanked 102 Times in 101 Posts

    CSS code for centering

    I thought the code to center a DIV was Position: Absolute but I was wrong. Any idea on how to center something on a page? Is there multiple codes for it?
    Been a sign maker for 7 years. My business:
    American Made Signs

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

    here is an example for you to try...
    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=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>centered div element</title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #container {
        width:760px;
        padding:20px;
        border:1px solid #333;
        margin:auto;
        box-shadow:#333 10px 10px 20px;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p
    </div>
    
    </body>
    </html>
    
    coothead

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,413
    Thanks
    68
    Thanked 102 Times in 101 Posts
    Didn't work for me. Here is a screenshot using the Margin and also the coding.
    By the way it's the images I want centered.


    Code:
    .hoverbox
    {
    	cursor: default;
    	list-style: none;
          margin:auto;
    }
    Attached Thumbnails Attached Thumbnails CSS code for centering-css.jpg  
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Where do you want them centered relative to?

    Coot's code should work, but you didnt provide enough information.

    To center an element, including an image, your element needs to be less width than its container, you need a valid doctype, and like coot said, set margin to auto for the element.

    You should post the link to your site.
    Teed

  • #5
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,413
    Thanks
    68
    Thanked 102 Times in 101 Posts
    Sorry, here is the full coding, and the needed CSS part.
    Also I put padding-left back in place, until I can get it fixed.

    PHP Code:
    <div id="header" class="container">

        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="#">View Photos</a></li>
                <li><a href="#">Upload Photos</a></li>
                <li><a href="#">Edit/Delete Photos</a></li>
                <li><a href="#">Customize</a></li>

            </ul>
        </div>
    </div>

    <ul class="hoverbox">
         <?php foreach ($photographs as $photograph) :?>
                 <li>
                    <a href="<?php echo $photograph->image_path(); ?>" title="<?php echo $photograph->caption?>" >
                    <img src="<?php echo $photograph->image_path(); ?>" border="0" style="border:1px solid black;" alt="<?php echo $photograph->filename?>"><img src="<?php echo $photograph->image_path(); ?>" alt="<?php echo $photograph->filename?>" class="preview"></a>
                   <?php if(($current->photograph != $photograph->id) && !isset($userview)) {?><p><a href="confirm.php?photo=<?php echo $photograph->id;?>" >Select As Profile Picture</a></p><?php }?>
                </li>
            <?php endforeach; ?>
    </ul>
    <p><?php echo $p_pagin?></p>

    </div>
    <div id="page">
        <div id="bg1">
            <div id="bg2">
                <div id="bg3">
                    <div id="content">
                        <h2><?php echo $username?>'s Photo Gallery</h2>
                        <p>Hi Everyone, welcome to my photo gallery.</p>
                    </div>

                </div>
            </div>
        </div>
    </div>

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFFFFF;
    }
    
    #wrapper {
    	background: url(../images/photogallery/images/img02.jpg) no-repeat center 115px;
    }
    
    .container {
    	width: 1000px;
    	margin: 0px auto;
    }
    
    
    
    #header {
    	width: 900px;
    	height: 115px;
    	margin: 0 auto;
    	padding: 0px 50px;
    }
    
    .hoverbox
    {
    	cursor: default;
    	list-style: none;
            padding-left: 280px;
    }
    
    .hoverbox a
    {
    	cursor: default;
    }
    
    .hoverbox a .preview
    {
    	display: none;
    }
    
    .hoverbox a:hover .preview
    {
    	display: block;
    	position: absolute;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }
    
    .hoverbox img
    {
    	background: #fff;
    	border-color: #aaa #ccc #ddd #bbb;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	padding: 2px;
    	vertical-align: top;
    	width: 100px;
    	height: 75px;
    }
    
    .hoverbox li
    {
    	background: #eee;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 3px;
    	padding: 5px;
    	position: relative;
    }
    
    .hoverbox .preview
    {
    	border-color: #000;
    	width: 200px;
    	height: 150px;
    }
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #6
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,413
    Thanks
    68
    Thanked 102 Times in 101 Posts
    24 hour bump, thank you
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Centering an element requires setting a width to the exact width of the content and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

    body {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }

    Example as a Class:

    .selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }

    HTML for Class: <div class="selector_name">Content here</div>

    Example as an ID:

    #selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    background: #fff url(path to non-tiled image) no-repeat center scroll;
    }

    HTML for Class: <div id="selector_name">Content here</div>

    Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

    Notice Coothead also has a valid document type in place.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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