CODEWITHSUNDEEP
htmlcssnavbar
SJ19
SJ19

Reputation: 2123

Navbar links don't center properly

I made a simple webpage with header and navbar, but I came across this little problem that's actually pretty annoying. The links aren't 100% in the middle of the inline list, here's a screenshot: https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png

To prevent confusion, the whole page is centered, but the screenshot is just of the navbar part.

The HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <h1>Test website</h1>
    <div id="nav">
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
            <li><a href="#">Fifth</a></li>
        </ul>
    </div>
</body>

</html>

The CSS file:

/* navigation bar */
#nav {
    width: 490px;
    margin: auto;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

/* unordered list in navbar */
#nav ul {
    text-align: center;
}

/* list items in navbar */
#nav li {
    display: inline-block;
}

/* links in items of navbar */
#nav li a {
    text-decoration: none;
    margin: 20px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

/* header 1 */
h1 {
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

Upvotes: 1

Views: 55

Answers (3)

Kundan Sankhe
Kundan Sankhe

Reputation: 224

Above answer is correct, but in ideal scenario <a> should have padding so in future if we want to have a background-color for link, it will occupied entire block.

http://jsfiddle.net/5Lu5qjux/

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

Just remove the padding and margin from the UL:

#nav ul {
  text-align: center;
  padding: 0;
  margin: 0;
}

Upvotes: 1

APAD1
APAD1

Reputation: 13666

The issue is the default padding that is being applied to the ul, simply zero out the padding:

#nav ul {
    text-align: center;
    padding:0;
}

JSFiddle

Upvotes: 5

Related Questions