如何使用 CSS3 和 HTML5 将导航栏中的链接居中？ [复制]答案

【问题标题】：How to center links in the navigation bar with CSS3 an HTML5? [duplicate]如何使用 CSS3 和 HTML5 将导航栏中的链接居中？ [复制]
【发布时间】：2020-07-27 02:19:40
【问题描述】：

我无法将导航栏中的链接居中，因为我希望按钮位于标题栏的中心，但是尝试了一切，到目前为止，他们始终保持在左侧

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

感谢任何愿意帮助我的人！

【问题讨论】：

标签： html css nav centering

【解决方案1】：

使用弹性。容易多了

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

【讨论】：

justify-content: center; 可能是 OP 正在寻找的东西，我想。
除非我们添加边距或填充，否则只会将它们捆绑在一起。重点是使用 FLEX！

【解决方案2】：

使用flex 框，它确实是水平和垂直居中元素的更好方法，所以这是我的解决方案取决于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;
}

【讨论】：