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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cannot find centering issue in this CSS..Help pls

    The issue I am having is that everything is centered correctly except the #main_section area. Any help is appreciated.

    Thans

    [CODE]
    *{
    margin: 0px;
    padding: 0px;
    }

    h1{
    font: bold 20px tahoma;
    }

    h2{
    font: bold 14px tahoma;
    }
    header, section, footer, aside, nav, article, hgroup{
    display: block;
    }
    body{
    text-align: center;
    width: 100%;
    display:-webkit-box;
    -webkit-box-pack: center;
    }
    #top_strip{
    background: black;
    padding: 15px;
    margin-bottom: 25px;
    }
    #big_wrapper{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
    }
    #top_nav{
    margin-bottom: 50px;
    }
    #new_div{
    margin-bottom: 50px;
    text-align: center;
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    }
    #main_section{
    text-align: center;
    }
    #welcome{
    width: 245px;
    }


    #bottom{
    width: 100%;
    -webkit-box-orient: horizontal;
    padding: 20px;
    background-image:url(footerbg.png);
    }
    [CODE]

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Can you post a link to your page?

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    The usual way to center a div is margin: 0 auto;, you don't need to say px. That will center it in whatever container it's in. You may need to set widths to get everything just the way you want it.

  • #4
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Are you trying to center a div or just text?I assumed you only wnated the text centered since the div code that you mentioned was just

    Code:
    #main_section{
    	text-align: center;
    }

    if you want to center the div itself the use

    Code:
    #main_section{
    	text-align: center;
    margin: 0 auto;
    }
    or

    Code:
    #main_section{
     	text-align: center;
    margin-left: auto;
    margin-right: auto;
     }
    Whether it is just text you want centered or the div itself DrDOS is correct. The widths need to be adjusted in order for your center effect to show up.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by DrDOS View Post
    The usual way to center a div is margin: 0 auto;, you don't need to say px. That will center it in whatever container it's in. You may need to set widths to get everything just the way you want it.
    "0" (zero) is dimensionless and does not require a unit.

    Centering an element requires setting a width that is less than 100%, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

    Code:
    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:

    Code:
    .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:
    Code:
    <div class="selector_name">Content here</div>
    Example as an ID:

    Code:
    #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:
    Code:
    <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.
    ☠ ☠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
    •