How to center links in the navigation bar with CSS3 an HTML5?

Question

I'm having trouble to center the links in the navigation bar, because I want the buttons to be in the center of the header bar, but trying everything, so far they always remain on the left

    .header {
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 10px 20px;
    border-radius: 5px;
    }

    .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 5px;
    }

    .header a:hover {
    background-color: #ddd;
    color: black;
    }

    .header a.active {
    background-color: #e1e1e1;
    color: black;
    }

    <header>
        <nav class="header">
            <a href="#default" class="logo">CompanyLogo</a>
            <a class="active" href="#home">Home</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </nav>  
    </header>

Thanks to anyone who will help me!

score 0 · Answer 1 · answered Jul 26 '20 at 18:14

0

use flex. it's a lot easier

.header{
display:flex;
justify-content:space-evenly;}

<header>
    <nav class="header">
        <a href="#default" class="logo">CompanyLogo</a>
        <a class="active" href="#home">Home</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </nav>  
</header>

answered Jul 26 '20 at 18:14

DCR

14,737
12
52
115

`justify-content: center;` was maybe what the OP was looking for, I think. – boredfromboredom Jul 26 '20 at 18:15
that will just bunch them together unless we add margin or padding. The main point is use FLEX! – DCR Jul 26 '20 at 18:17

score 0 · Answer 2 · answered Jul 26 '20 at 18:19

use flex box it is really a nicer way to center elements horizontally and vertically so here is my solution depend on flex

.header {
background-color: #f1f1f1;
padding: 10px 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}

.header a {
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 5px;
}

.header a:hover {
background-color: #ddd;
color: black;
}

.header a.active {
background-color: #e1e1e1;
color: black;
}

How to center links in the navigation bar with CSS3 an HTML5?

2 Answers2