CODEWITHSUNDEEP
htmlcssnavigationstylescenter
rabbitt
rabbitt

Reputation: 2598

How do I center my CSS <li> based navigation bar?

I have a CSS <li> based navigation bar styled and implemented as below:

CSS:

DIV.topbar_outer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height:33px;
    /*background-color: #202020;*/
}

DIV.topbar_inner {
    /*font info*/
    text-align: center;
    padding-top: 8px;
    /*layout*/
    position: absolute;
    left: 50%;
    width: 900px;
    height: 25px;
    margin-left: -450px;
    background-color: #202020;
}

/*Navigation bar format styling*/
.navigation_bar {
    border: 0px;
    margin-top: 0px;
}

.navigation_bar li {
    display: inline;
    list-style: none;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

/*Navigation bar link styling*/
.navigation_bar li a {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FF0000; font-size: 13px;
}
.navigation_bar li a:hover {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

HTML:

<div class="topbar_outer">
    <div class="topbar_inner">
        <ul class="navigation_bar">
            <!-- Navigation bar items -->
            <li>
                HOME
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PHOTOS</a>
            </li>
            <li>
                <a href="#">DINING</a>
            </li>
            <li>
                <a href="#">FUNCTIONS</a>
            </li>
            <li>
                <a href="#">CLUB EVENTS</a>
            </li>
            <li>
                <a href="#">BOWLS NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</div>

I seem to be having an issue with the centering of the list items within the topbar_inner container, this can be seen below:

screenshot of alignment issue

The list seems to be mostly centered, but off-center to the right a little bit, just enough to be noticeable.

Can anyone provide a solution for the absolute horizontal centering of the navigation list?

Upvotes: 0

Views: 371

Answers (2)

Adam McElroy
Adam McElroy

Reputation: 458

Your ul has a left padding that the browser automatically applies. Just remove this and everything will be centered.

Just add padding: 0; like below:

.navigation_bar {
    border: 0px;
    margin-top: 0px;
    padding: 0;
}

Upvotes: 1

Plasebo
Plasebo

Reputation: 338

Use inline-block instead of inline for the li. You can now apply a height to it and a line-height to the li a

Upvotes: 0

Related Questions