我怎样才能将我的导航栏居中，似乎无法找到问题在我的css和html上？

Question

我正在努力让导航栏转到标题右侧，它位于我的徽标正下方。

.primary-header{ /*Main top header with navbar*/
    display: flex;
    
}

.primary-header img {  /*Logo properties*/
    width: 184px;
    height: 68px;
}

.topnav a{
    display: flex;
    justify-content: center;
    float: left;
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    padding: 14px 16px;
}

<header class = "primary-header">
    <div class="wrapper">
        <!--Logo top nav bar-->
        <img src ="images/Logo Completo.png" alt="logo1">
        <!--Nav Bar-->
        <div class="topnav" id="myTopnav">                  
            <a href="#home" class="active">Home</a>
            <a href="#blog">Blog</a>
            <a href="#biblioteca">Biblioteca</a>
            <a href="#gaming">Gaming</a>
            <a href="#about">Sobre Mi</a>
            <a href="#contacto">Contacto</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
                </a>
        </div>
    </div>  
</header>

Answer 1

A

div

默认情况下是块元素，因此

.topnav

元素默认占据其自己行的整个宽度。 一种方法可能是做到

inline-block

：

.primary-header{ /*Main top header with navbar*/
    display: flex;
    
}

.primary-header img {  /*Logo properties*/
    width: 184px;
    height: 68px;
}

.topnav {
    display: inline-block;
}

.topnav a{
    display: flex;
    justify-content: center;
    float: left;
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    padding: 14px 16px;
}

<header class = "primary-header">
    <div class="wrapper">
        <!--Logo top nav bar-->
        <img src ="images/Logo Completo.png" alt="logo1">
        <!--Nav Bar-->
        <div class="topnav" id="myTopnav">                  
            <a href="#home" class="active">Home</a>
            <a href="#blog">Blog</a>
            <a href="#biblioteca">Biblioteca</a>
            <a href="#gaming">Gaming</a>
            <a href="#about">Sobre Mi</a>
            <a href="#contacto">Contacto</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
                </a>
        </div>
    </div>  
</header>

另一种方法可能是使

.wrapper

父元素成为 Flex 容器，这会打开 各种 Flex 样式选项:

.primary-header{ /*Main top header with navbar*/
    display: flex;
    
}

.primary-header img {  /*Logo properties*/
    width: 184px;
    height: 68px;
}

.wrapper {
    display: flex;
}

.topnav a{
    display: flex;
    justify-content: center;
    float: left;
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    padding: 14px 16px;
}

<header class = "primary-header">
    <div class="wrapper">
        <!--Logo top nav bar-->
        <img src ="images/Logo Completo.png" alt="logo1">
        <!--Nav Bar-->
        <div class="topnav" id="myTopnav">                  
            <a href="#home" class="active">Home</a>
            <a href="#blog">Blog</a>
            <a href="#biblioteca">Biblioteca</a>
            <a href="#gaming">Gaming</a>
            <a href="#about">Sobre Mi</a>
            <a href="#contacto">Contacto</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
                </a>
        </div>
    </div>  
</header>