导航菜单无法居中

问题描述

我的顶部有一个黑色的栏，其中有我的导航菜单。但是，如果我添加“ text-align：center”而不是“ float：right”，则菜单/链接将转到中心，但不在顶部的黑色栏中。有谁知道如何解决这个问题？

<html>
<head>
    <style>
        *
         {
             margin: 0;
             padding: 0;
         }
         header {
             background-color: black;
             height: 85px;
             line-height: 85px;
         }
         ul {
             list-style: none;
         }
         ul li {
             position: relative;
             display: inline-block;
             font-size: 17px;
         }
         header nav {
             position: relative;
             float: right;
         }
         header nav ul li a {
             padding-right: 20px;
             font-weight: bold;
             text-decoration: none;
             color: #DCDCDC;
         }

         header nav ul li a:hover {
             color: white;
         }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <a href="" class="logo"><img src="mylogo.png"></a>
                <nav>
                    <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">home1</a></li>
                        <li><a href="">home2</a></li>
                        <li><a href="">home3</a></li>
                        <li><a href="">home4</a></li>
                        <li><a href="">home5</a></li>
                        <li><a href="">home6</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</body>
</html>

解决方法

将display: flex和justify-content:center添加到.row类中。为徽标添加css值。我在徽标中添加了position: absolute和left: 0。如果要使徽标也与中心水平对齐，请删除我为.logo添加的CSS。

这是一个有效的代码段：

<html>
<head>
    <style>
        *
         {
             margin: 0;
             padding: 0;
         }
         
         .row {
           display: flex;
           justify-content: center;
         }
         header {
             background-color: black;
             height: 85px;
             line-height: 85px;
         }
         .logo {
           position: absolute;
           left: 0;
         }
         ul {
             list-style: none;
         }
         ul li {
             position: relative;
             display: inline-block;
             font-size: 17px;
         }
         header nav {
             position: relative;
             float: right;
         }
         header nav ul li a {
             padding-right: 20px;
             font-weight: bold;
             text-decoration: none;
             color: #DCDCDC;
         }

         header nav ul li a:hover {
             color: white;
         }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <a href="" class="logo"><img src="mylogo.png"></a>
                <nav>
                    <ul>
                        <li><a href="">home</a></li>
                        <li><a href="">home1</a></li>
                        <li><a href="">home2</a></li>
                        <li><a href="">home3</a></li>
                        <li><a href="">home4</a></li>
                        <li><a href="">home5</a></li>
                        <li><a href="">home6</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
</body>
</html>

要使用CSS flexbox在Center中对齐元素，这是对齐项目的最简单方法要使它们水平居中，请使用justify-content：center; 只需将div的显示更改为flex即可，其内部内容将水平居中

.flexbox{
  display:flex;
  justify-content:center;
 }

<div class="flexbox">
    <!----Your data you want in Center-->
</div>

float：right适用于它所连接的元素，但是text-align：center作用于元素的内容。因此，您需要将文本对齐方式移动到标题：

    <html>
    <head>
        <style>
            *
             {
                 margin: 0;
                 padding: 0;
             }
             header {
                 background-color: black;
                 height: 85px;
                 line-height: 85px;
                 text-align: center
             }
             ul {
                 list-style: none;
             }
             ul li {
                 position: relative;
                 display: inline-block;
                 font-size: 17px;
             }
             header nav {
                 position: relative;

             }
             header nav ul li a {
                 padding-right: 20px;
                 font-weight: bold;
                 text-decoration: none;
                 color: #DCDCDC;
             }

             header nav ul li a:hover {
                 color: white;
             }
        </style>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="row">
                    <a href="" class="logo"><img src="mylogo.png"></a>
                    <nav>
                        <ul>
                            <li><a href="">home</a></li>
                            <li><a href="">home1</a></li>
                            <li><a href="">home2</a></li>
                            <li><a href="">home3</a></li>
                            <li><a href="">home4</a></li>
                            <li><a href="">home5</a></li>
                            <li><a href="">home6</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    </body>
    </html>

html web-deployment