CODEWITHSUNDEEP
htmlcssnavbar
YoungForch
YoungForch

Reputation: 55

Centering My Navbar Links

So I've been desperately trying out every method I can find online for centering my nav bar links.

However whatever I do, they seem to either line horizontally (like I want) but to the left of the page (not what I want), or they line vertically (not what I want) but to the center of the page (what I want).

It seems no matter what margin, float, display settings I use in the CSS it never renders the navbar links in a horizontal line, in the center of the page.

My code is:

HTML:

<body>
    <div class="maincontent">
        <div class="navbar">
            <div>
                <h1>Tom Love</h1>

                <ul>
                    <li> <a href="about.html">Home</a> </li>
                    <li> <a href="about.html">About</a> </li>
                    <li> <a href="about.html">Portfolio</a> </li>
                    <li> <a href="about.html">Contact</a> </li>
                </ul>
            </div>
        </div>

    </div>

</body>

CSS:

h1 {font-family:'Roboto Slab',sans-serif;
    font-size:250%;
    font-weight:300;
    color:black;
    text-align:center;
    line-height:32px;

} 

h1 span {font-size:60%;
    font-family:'Roboto Slab',sans-serif;
} 

.navbar {
clear:both;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:center;
width:100%;
}

.navbar div {
    float:center;
    position:relative;
}

.navbar ul {
    list-style-type: none;
    text-align:center;
    padding:10px;
    margin:auto;
}

.navbar ul li {
    padding:10px;
    float:center;
}

.navbar ul li a {
    text-decoration:none;
    color:black;
    margin:10px;
    display:inline;
    width:80px;
    height:30px;
}

.navbar ul li a:hover {
    text-decoration:none;
    color:white;
    background:black;
}

Apologies for any glaring mistakes in the code, it's my first attempt at building something outside of codeacademy and YouTube tuts.

Thanks in advance :)

Upvotes: 2

Views: 81

Answers (2)

misterManSam
misterManSam

Reputation: 24692

  • Remove float:center (it does not exist)

  • Add display: inline or display: inline-block to .navbar ul li

  • If you want everything centered then place margin: 0 auto; on .maincontent and give it a width.

The differences between display values are listed here on the MDN.

It could be worth considering a CSS Reset or Normalise. (Do some research on the two options)

Have an example!

CSS

.maincontent {
    margin: 0 auto;
    width: 800px;
}

h1 {font-family:'Roboto Slab',sans-serif;
    font-size:250%;
    font-weight:300;
    color:black;
    text-align:center;
    line-height:32px;

} 
.navbar ul {
    list-style-type: none;
    text-align:center;
    padding:10px;
}

.navbar ul li {
    padding:10px;
    display: inline;
}

.navbar ul li a {
    text-decoration:none;
    color:black;
    margin:10px;
}

.navbar ul li a:hover {
    text-decoration:none;
    color:white;
    background:black;
}

Upvotes: 0

razemauze
razemauze

Reputation: 2676

Just add

display: inline;

to your .navbar ul li

Upvotes: 1

Related Questions