WordPress.org

Ready to get started?Download WordPress

Forums

center-align block element (10 posts)

  1. yanay
    Member
    Posted 1 year ago #

    HI
    I am trying to center the main navigation element on the pages of my premium theme header. Firebug says this is:
    <nav role="navigation" class="site-navigation main-navigation">

    I tried adding to the theme's custom CSS field:

    .nav.site-navigation.main-navigation
    {text-align: center;}

    also tried:

    {
        margin-left:auto;
        margin-right:auto;
        width: 480 px;
    }

    but nothing helped - the element is either left aligned or right aligned on the page

    Any idea what am I doing wrong?

    http://blueyecam.com/

    Thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Consider this document on centring things
    http://www.w3.org/Style/Examples/007/center.en.html

    Other than that, use CSS-specific forums to discuss CSS-specific queries.

  3. yanay
    Member
    Posted 1 year ago #

    Thanks
    I have already tired 'centering things's solution

    {
        margin-left: auto;
        margin-right: auto;
    }

    But it did not align center the element

    I'll try the CSS forum for some specific help then

  4. LastForOne
    Member
    Posted 1 year ago #

    .nav.site-navigation.main-navigation

    here .nav is a css class not the element

    try using
    nav.site-navigation or nav.main-navigation

  5. yanay
    Member
    Posted 1 year ago #

    I tired adding for each nav.main-navigation and nav.site-navigation

    {
        margin-left: auto;
        margin-right: auto;
    }

    also tried for each:
    {text-align: center;}

    but the element still refuses to center on the page
    I know it must be some simple error I'm making but cannot tell where...

  6. LastForOne
    Member
    Posted 1 year ago #

    in your css .main-navigation you're floating it to right, you can remove the float and add some margin on left to center it.

  7. yanay
    Member
    Posted 1 year ago #

    Thank you!
    That was it - removing float: right from .main-navigation.
    I added to style.css:
    nav.main-navigation

    {
    margin-left: 162px;
    }

    and to to rtl.css:

    nav.main-navigation
    {
    margin-right: 162px;
    }

    It seems to have centered the navbar

    But I am not exactly sure why I had to add styles to nav.main-navigation instead of to main-navigation

  8. LastForOne
    Member
    Posted 1 year ago #

    main-navigation doesn't exist means CSS doesn't recognize it as a class or ID unless you add a dot(.) or hash(#) in front of it .main-navigation(class) #main-navigation(ID) in CSS and by adding nav.main-navigation you are applying style to <nav> which has a class of .main-navigation
    Example:
    <nav class='main-navigation'>something</nav>

  9. yanay
    Member
    Posted 1 year ago #

    I see. Thanks for clarifying.
    Shouldn't

    {
        margin-left: auto;
        margin-right: auto;
    }

    center the element as well? Yet in my case it did not.
    I would think the auto definition would be a better centering method since the element will always be centered regardless of screen size

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The above method only works if the element has a width less than the containing element, so if you set a width, it will work, but you'd need to adjust the width manually when you add items,

    To get around that, try this one:

    display: table;
    margin: 0 auto;

Topic Closed

This topic has been closed to new replies.

About this Topic