Fatal编程技术网
  • html/
  • Html 如何使导航栏的元素居中

Html 如何使导航栏的元素居中

html css

Html 如何使导航栏的元素居中,html,css,flexbox,navbar,Html,Css,Flexbox,Navbar,你好 我无法将我的不同链接放在导航栏的中心：我希望它真正居中，这样我就可以将我的社交网络或其他东西放在这些元素的右侧 所以我试着用flexbox来集中我的元素，经过很多次尝试和几天的思考，我来到这里，希望有人能解释我怎么做，我想了解问题的来源 我在代码下方附上： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

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

所以我试着用flexbox来集中我的元素，经过很多次尝试和几天的思考，我来到这里，希望有人能解释我怎么做，我想了解问题的来源

我在代码下方附上：

<!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>

* {
    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;
}
Codepen:

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>

* {
    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;
}
如果您需要对齐中心徽标和导航链接，您可以这样做

.topbar {  
    justify-content: center;  
    width: 100%;
}
添加
宽度：100%和更改
调整内容：中心



*{
框大小：边框框；
保证金：0；
填充：0；
}
正文，html{
字体大小：16px；
颜色：rgba（0,0,87）；
字体系列：“蒙特塞拉特”，无衬线；
线高：1.6；
保证金：0；
字号：500；
}
.顶杆{
高度：80px；
背景色：#fff；
盒影：08px15pxRGB（0/5%）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
宽度：100%；
}
.顶栏导航{
显示：内联块；
文本对齐：居中；
}
.顶杆导航a{
颜色：#9F9F9F；
文字装饰：无；
字号：500；
填充：0 20px；
显示：内联块；
文本对齐：居中；
}
.topbar导航a:悬停，.topbar导航a.激活{
颜色：#000；
}
.页眉标志{
光标：指针；
宽度：25vh；
}



波塞冬|完美的不和谐机器人
完美的不和谐机器人。
波塞冬是你唯一需要的不和谐机器人！

此答案假设您希望将链接置于中心位置，但不希望将徽标或
的其他内容置于中心位置

您将
flexbox设置为
justify content:space-between
。那太好了；这意味着您只需向其中添加一个子元素。然后第一个元素（徽标）将位于左侧，
链接将位于中间，第三个元素将位于右侧。您现在可以添加一个空的
；您需要将所有右侧项目放入此元素中

这实际上不会提供完美的居中，因为三个子元素的宽度不同。您可以通过以下方式解决此问题（取决于实际布局需要）：


.topbar>：第一个孩子，
.topbar>：最后一个孩子{
弹性基准：25%；
}



实验后，CSS中还剩下一些不必要的部分，主要是
text align:center
的副本。例如，您需要删除其中一些，以防止徽标在其区域内居中。
您的代码实际上很好。对于
.topbar
类，您使用了
justify content:space-between。这将尽可能地拉伸元素中的项目。因为里面只有两个元素（徽标图像和导航栏），所以它将一个元素放在左边，另一个元素放在右边

但是，由于您希望导航栏居中，并且希望在右侧添加社交网络，所以您所要做的就是在导航栏之后再添加一个
div
，并将所有社交网络放在那里。因为现在您有3个项目，徽标图像将一直位于左侧，导航栏将居中，社交网络将一直位于右侧


下面是工作代码：
两个简单的弹性盒应该可以完成这项工作

flexbox 1：顶杆
这一个将顶杆分成两部分。第一部分是品牌形象和品牌名称。第二部分是导航链接


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

     }


flexbox二：。顶栏导航
这一个占据了为它分配的100%的右侧空间，并将所有链接放置在中心


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



JSFIDLE或codepen会更好。所以ppl（和我一样）在手机上浏览，无法使用你的源代码附件。阅读本文：OK抱歉我会更新此内容谢谢你，但徽标必须保留在左侧，我必须能够在右侧添加我的社交网络，最好是在同一行上，可能吗？谢谢你的解释和帮助，我什么都懂了