Html Can'；无法将导航菜单置于中心_Html_Css_Web Deployment

Html Can'；无法将导航菜单置于中心

html css

Html Can'；无法将导航菜单置于中心,html,css,web-deployment,Html,Css,Web Deployment,我在顶部有一个黑条，上面有我的导航菜单。但是，如果我添加“文本对齐：中心”而不是“浮动：右”，那么菜单/链接将转到中心，而不是顶部的黑色条中。有人知道如何解决这个问题吗 * { 保证金：0；填充：0； } 标题{ 背景色：黑色；高度：85px；线高：85px； } 保险商实验室{ 列表样式：无； } ulli{ 位置：相对位置；显示：内联块；字号：17px； } 标题导航{ 位置：相对位置；浮动：对； } 标题nav ul li a{ 右边填充：20px；字体大小：粗体；文字

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


*
{
保证金：0；
填充：0；
}
标题{
背景色：黑色；
高度：85px；
线高：85px；
}
保险商实验室{
列表样式：无；
}
ulli{
位置：相对位置；
显示：内联块；
字号：17px；
}
标题导航{
位置：相对位置；
浮动：对；
}
标题nav ul li a{
右边填充：20px；
字体大小：粗体；
文字装饰：无；
颜色：#DCDC；
}
收割台导航ul li a：悬停{
颜色：白色；
}

将

显示：flex

和

调整内容：中心

添加到

行

类中。为徽标添加css值。我在徽标中添加了

position:absolute

和

left:0

。如果您想让您的徽标水平对齐到中心，请删除我为

.logo

添加的css

下面是一个工作片段：


*
{
保证金：0；
填充：0；
}
.行{
显示器：flex；
证明内容：中心；
}
标题{
背景色：黑色；
高度：85px；
线高：85px；
}
.标志{
位置：绝对位置；
左：0；
}
保险商实验室{
列表样式：无；
}
ulli{
位置：相对位置；
显示：内联块；
字号：17px；
}
标题导航{
位置：相对位置；
浮动：对；
}
标题nav ul li a{
右边填充：20px；
字体大小：粗体；
文字装饰：无；
颜色：#DCDC；
}
收割台导航ul li a：悬停{
颜色：白色；
}

要对齐中间的元素，请使用CSS flexbox，这是对齐项目的最简单方法要水平居中，请使用“对齐内容：居中”；只需将div的显示更改为flex，其内部内容将水平居中

.flexbox{
显示器：flex；
证明内容：中心；
}

浮动：右侧应用于它所附着的元素，但文本对齐：中心作用于元素的内容。因此，您需要将文本与标题对齐：

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


*
{
保证金：0；
填充：0；
}
标题{
背景色：黑色；
高度：85px；
线高：85px；
文本对齐：居中
}
保险商实验室{
列表样式：无；
}
ulli{
位置：相对位置；
显示：内联块；
字号：17px；
}
标题导航{
位置：相对位置；
}
标题nav ul li a{
右边填充：20px；
字体大小：粗体；
文字装饰：无；
颜色：#DCDC；
}
收割台导航ul li a：悬停{
颜色：白色；
}

非常感谢您。很好的解释没问题。我建议您查看一下

Flexbox

。浮子现在很难看，我一定会：）