center-align block element

  • yanay

    (@yanay)


    11 years, 2 months 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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 2 months 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.

    Thread Starter yanay

    (@yanay)

    11 years, 2 months 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

    LastForOne

    (@jarral)

    11 years, 2 months ago

    .nav.site-navigation.main-navigation

    here .nav is a css class not the element

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

    Thread Starter yanay

    (@yanay)

    11 years, 2 months 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…

    LastForOne

    (@jarral)

    11 years, 2 months 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.

    Thread Starter yanay

    (@yanay)

    11 years, 2 months 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

    LastForOne

    (@jarral)

    11 years, 2 months 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>

    Thread Starter yanay

    (@yanay)

    11 years, 2 months 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

    WPyogi

    (@wpyogi)

    11 years, 2 months 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;

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘center-align block element’ is closed to new replies.