Center a tags inside a div nav bar-CodePudding

So I'm creating this navigation bar, but I have some trouble aligning my items, the page will also have some svg icons in this nav bar later on. But I'm trying to align it like this, but how?

This is probably something very easy to fix, but I've tried to vertical align, and other stuff, but it doesn't move where I want to to move.

/*
 Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: #0f1;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.topnav a:hover {
    color: #000;
}

.topnav a.active {
    color: #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grundfos Metrics</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
    <link rel="stylesheet" href="./css/site.scss">
    <script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
    <header>
        <div class="topnav">
            <a class="floatLeft"            href="#news"><h1>Website Title</h1></a>
            <a class="floatRight"           href="#contact">Coverage</a>
            <a class="floatRight"           href="#news">Archives</a>
            <a class="active floatRight"    href="#home">Home</a>
        </div>

    </header>
</body>
</html>

CodePudding user response：

You could use flexbox to do that.

Just add display: flex; and align-items: center; to the .topnav.

And to align your content left or right, you could use two container and a justify-content: space-between; on the .topnav.

That will have as effect to align the first container to the most left and the second to the most right.

But if you add another container, the middle on will be in the middle ! And the two other will be at the same place as before

Aligning the right part with flex will also have as effect to reverse the order of the elements ! So don't forget to change that too.

I've done an example for your navbar, don't hesitate to ask if you doesn't understand my solution.

/*
 Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: #0f1;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: #000;
}

.topnav a.active {
    color: #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grundfos Metrics</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
    <link rel="stylesheet" href="./css/site.scss">
    <script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
    <header>
        <div class="topnav">
          <div class="leftpart">
                      <a href="#news"><h1>Website Title</h1></a>
          </div>
          <div class="rightpart">
                      <a href="#contact">Coverage</a>
              <a href="#news">Archives</a>
              <a class="active"    href="#home">Home</a>
          </div>
        </div>

    </header>
</body>
</html>

CodePudding user response：

In this case, you need to use flexbox first you remove all the float CSS and its class then use flexbox to use two different divs to the first logo and second links.

The CSS file

.topnav {
    overflow: hidden;
    background: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topnav a {
    color: #0f1;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a h1 {
    margin: 0;
}

.topnav a:hover {
    color: #000;
}

.topnav a.active {
    color: #000;
}

HTML code

<body>
    <header>
        <div class="topnav">
            <div>
                <a href="#news">
                    <h1>Website Title</h1>
                </a>
            </div>
            <div>
                <a class="active" href="#home">Home</a>
                <a href="#news">Archives</a>
                <a href="#contact">Coverage</a>
            </div>
        </div>
    </header>
</body>

CodePudding user response：

Try adding this to your css.

.topnav a {
line-height:17px;
}