How to center menu and footer bar?

[web_editor]

Hi! I’m new in css and i’m building now my first website. I want to center the menu and footer bar? Not only the text, but the whole nav bar. And how to adjust the alignment of footer bar, I mean how to move in slightly top of the bottom of the page? Pls help me. Thank you!

Here’s the script of menu bar css:

.main-navigation {
    clear: both;
    display: table;
    font-weight: 300;
    font-family: 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    position: relative;
    text-align: center;
    border-bottom: 3px solid #e92121;
    background: #ff0000;
    height: 43px;
    width: 80%;
}
.main-navigation .ak-container{
    padding:0 !important;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    display: inline-block;
    position: relative;
    line-height:43px;
    font-size:18px;
    text-transform: initial;
    color:#ababab;
    white-space: nowrap;
}
.main-navigation.menu-right{
    text-align: right;
}
.main-navigation.menu-center{
    text-align: center;
}
.main-navigation.menu-right li{
    margin-left: 25px;
    margin-right:0;
}
.main-navigation.menu-center li{
    margin-left: 12px;
    margin-right:12px;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color: #FFF;
    padding: 0 18px
}
.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    position: absolute;
    z-index: 99999;
    background: #FFF;
    top: 100%;
    border-bottom: 3px solid #e92121;
    border-top: 3px solid #e92121;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

Here’s the link of footer bar css:

#bottom-footer{ 
    background: #E8E8E8;
    padding: 0px 0 0 0;
    text-transform: initial;
    font-family: Arial, Helvetica, sans-serif;
    height: 31px;
    min-height: 1px;
    position: relative;
        font-weight: 300;
    width: 80%;
    text-align: center;
    font-size: 11px;
    margin: 20px 0 20px;
    color: #969696;

[__]

I want to center the menu and footer bar

You’d need to show us an example of the code you are working with. Assuming you have a <nav> (or other block) element that wraps your menu, you can use margin:0 auto;. Same thing with your footer.

how to adjust the alignment of footer bar, I mean how to move in slightly top of the bottom of the page?

I’m not completely sure what you are asking, but it might be this?

[web_editor]

I already put the css script.

[__]

I already put the css script.

…and the HTML? You can’t troubleshoot CSS without knowing what markup it applies to.

BTW, why are you using display:table? If your .main-navigation were display:block, my suggestion above would probably work just fine.

[web_editor]

Here’s the html of menu bar:

<nav id="site-navigation" class="main-navigation menu-left">
            <div class="ak-container">
                <h1 class="menu-toggle">Menu</h1>

                <div class="menu-menu_list-container"><ul id="menu-menu_list" class="menu"><li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-860"><a href="http://66.147.244.92/~homecre1/">Home</a></li>
<li id="menu-item-861" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-861"><a href="http://66.147.244.92/~homecre1/about-us">About Us</a></li>
<li id="menu-item-865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-865"><a href="http://66.147.244.92/~homecre1/for-retailers">For Retailers</a></li>
<li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-862"><a href="http://66.147.244.92/~homecre1/careers">Careers</a></li>
<li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-864"><a href="http://66.147.244.92/~homecre1/loans">Loans</a></li>
<li id="menu-item-863" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-863"><a href="http://66.147.244.92/~homecre1/payments">Payments</a></li>
<li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-866"><a href="http://66.147.244.92/~homecre1/contacts">Contacts</a></li>
</ul></div>         </div>
        </nav>

Footer html:

<footer id="colophon" class="site-footer" role="contentinfo">
    
        
        <div id="bottom-footer" style=clear:both;>
        <div class="ak-container">
            <div class="site-info">
                
                <a href="http://66.147.244.92/~homecre1/" title="Access Keys">Home</a>              <span class="sep"> | </span>
                <a href="http://66.147.244.92/~homecre1/contact" title="Access Keys">Contact Us</a>         </div><!-- .site-info -->

            <div class="copyright">
                &copy; HC Consumer Finance Inc., 2014               <a href="http://66.147.244.92/~homecre1">
                                </a>
            </div>
        </div>
        </div>
    </footer>

I change it to block but nothing happened

[__]

I change it to block but nothing happened

Did you also apply the margin?

Here’s a codepen. I removed the display:table and added margin:0 auto. (I also removed the height on your #site-navigation, since it was too short and cut off the menu contents.)

You can take a similar approach to centering your footer.

[web_editor]

Its working! Thanks for your help. How can I divide equally the width of each menu?

[Author]

Posts