www.webdeveloper.com
Results 1 to 6 of 6

Thread: Margin 0 auto; failing me

  1. #1
    Join Date
    Jan 2013
    Posts
    25

    Margin 0 auto; failing me

    Hi

    Margin: 0 auto; seems to be failing me

    I have set the container to display block, and width 100% but to no avail. I always have trouble getting this to work

    Any ideas?

    It's with reference to the nav bar text found at
    http://www.code-creative.co.uk/pica/

    Here is my css
    .menu-top-nav-container {
    display: block;
    margin: 0 auto;
    width: 100%;
    }

  2. #2
    Join Date
    Jan 2013
    Posts
    10
    What are you trying to do, center the container? If so, then drop the '0' and just put auto.

    Otherwise, explain a little further what you are trying to accomplish.

    HOS

  3. #3
    Join Date
    Jan 2013
    Posts
    25
    hey

    thanks for the fast reply! Well I didn't think there was a difference in the 0 I thought it was best practise to have it in there.

    It's ok though I've applied margins to each nav entry and used last child to omit the last margin right so its rendering nicely

    I was trying to just center align the text

    No problems its been a long day cheers again for replying

  4. #4
    Join Date
    Feb 2013
    Posts
    2
    margin:0 auto;

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,126
    For centering text, you want to use "text-align: center;" The text in the nav bar already appears centered.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,214
    Centering:

    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:

    Example as an ID:

    Code:
    #selector_name{
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    }

    Example as a Class:

    Code:
    .selector_name {
    width: 90%;
    height: 600px; /* optional */
    margin: 0 auto;
    }
    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;
    }
    HTML for Class:
    Code:
    <div id="selector_name">Content here</div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles