如何使导航栏的元素居中

Question

您好！ 我无法将我的不同链接置于导航栏的中央：我希望它真正居中，这样我就可以将社交网络或其他东西放在这些元素的右侧

所以我尝试了 flexbox 来居中我的元素，经过多次尝试和思考如何做，我来到这里希望有人能解释我如何做，我想了解在哪里问题来自

我在下面附上我的代码：

代码笔: https://codepen.io/antyss77/pen/yLMPOPj

HTML :

<!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>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>
<body>
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>

        <nav>
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
        </nav>
    
    </header>

    <h1>The Perfect Discord Bot.</h1>
    <h5>Poseidon is the only Discord bot you'll ever need!</h5>
</body>
</html>

CSS :

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.topbar nav {
    display: inline-block;
    text-align: center;
}


.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

Answer 1

如果您需要对齐中心徽标和导航链接，您可以这样做

.topbar {  
    justify-content: center;  
    width: 100%;
}

添加 width: 100%; 并更改 justify-content: center;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgb(0 0 0 / 5%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.topbar nav {
    display: inline-block;
    text-align: center;
}


.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

<!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>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>
<body>
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>

        <nav>
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
        </nav>
    
    </header>

    <h1>The Perfect Discord Bot.</h1>
    <h5>Poseidon is the only Discord bot you'll ever need!</h5>
</body>
</html>

Answer 2

此答案假定您希望将链接居中，但不是您的徽标或 <header>.

的其他内容

您已将 <header> flexbox 设置为 justify-content: space-between。那太棒了;这意味着您只需向其中添加一个子元素即可。然后第一个元素（徽标）将在左侧，<nav> 链接将在中间，第三个元素将在右侧。您现在可以添加一个空的 <div></div>；您需要将所有右侧项目都放在该元素中。

这实际上不会提供完美的居中，因为三个子元素的宽度各不相同。你可以用这样的东西来解决这个问题（取决于实际布局需要）：

.topbar > :first-child,
.topbar > :last-child {
  flex-basis: 25%;
}

由于实验，您的 CSS 中留下了一些不必要的部分，主要是 text-align: center 的副本。例如，您需要删除其中一些以防止徽标在其区域内居中。

Answer 3

你的代码其实还不错。对于 .topbar class，您使用了 justify-content: space-between;。这将尝试尽可能地拉伸元素内的项目。由于内部只有 2 个元素（徽标图像和导航栏），因此它会将一个一直定位到左侧，另一个一直定位到右侧。

但是，既然你想让导航栏居中并且想在右边添加社交网络，那么你所要做的就是在导航栏后面再添加一个div并将所有社交网络放在那里.由于现在您有 3 个项目，徽标图像将一直位于左侧，导航栏将居中，社交网络将一直位于右侧。

这是工作代码：https://jsfiddle.net/oqc951jd/13/

Answer 4

两个简单的弹性盒子就可以完成这项工作。

flexbox 一：topbar 这个将顶部栏分成两部分。第一部分包含品牌形象和名称。第二部分包含导航链接。

 .topbar{
    display  : flex;
    justify-content : flex-start;
    align-items : center;
    text-align : center;

     }

flexbox 二：.topbar nav 这个在分配给它的右边占用了 100% space，并将所有链接放在中间。

 .topbar nav {
    display: flex;
    justify-content : center;
    align-items : center;
    width: 100%;
  }

如何使导航栏的元素居中

How to center elements of a navbar

html

css

navbar

flexbox