时间戳

首页 > 解决方案 > 无法使导航菜单居中

html - 无法使导航菜单居中

问题描述

我在顶部有这个黑条，里面有我的导航菜单。但是，如果我添加“文本对齐：中心”而不是“浮动：右”，那么菜单/链接会转到中心，但不会出现在顶部的黑条中。有谁知道如何解决这个问题？

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

标签： htmlcssweb-deployment

解决方案

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

这是一个工作片段：

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

推荐阅读