Search code examples
htmlcssalignmentcenter

CSS Center nav bar links

Having trouble centering some text links on my nav bar, margin left and right auto aren't working and i've tried setting display types to block/inline-block to no avail. The solution is probably staring me in the face I know but I really can't find it.

CSS:

.navmenu {
    background-color: #1e1e1e;
    background-image: url("../images/NavBar.gif");
    background-position: top;
    border-top: 1px solid #383838;
    margin-bottom: 5px;
    z-index:105;
}
.navlink {
    margin-left:auto;
    margin-right: auto;
    width: 100%;
    font-size: 28px;
    text-transform: uppercase;
}

HTML:

<div class="navmenu">
    <div class="navlink">
        <a href="index.php">Home</a>
        <a href="http://twitch.tv/" target="_blank">Twitch</a>
        <a href="http://youtube.com/" target="_blank">YouTube</a>
        <a href="http://twitter.com/" target="_blank">Twitter</a>
        <a href="http://facebook.com/" target="_blank">Facebook</a>
        <a href="teamspeak.php">Teamspeak</a>
        <a href="/forum/">Forum</a>
    </div>
</div>
Solution

  • Use flex to it get more flexible:

    .navmenu { margin: 0 auto }
.navlink { display: flex; justify-content: center }