Html 如何在不使用浮动的情况下正确对齐导航栏？_Html_Css

Html 如何在不使用浮动的情况下正确对齐导航栏？

html css

Html 如何在不使用浮动的情况下正确对齐导航栏？,html,css,Html,Css,基本上我想做这个。。。像这样居中对齐：但是，似乎“浮动”正在干预这一点。如何以一种简单的方式修复此问题，使第一个图像看起来像第二个代码产品页面身体{ 背景：#eee；字体系列：“Lato”，无衬线； } #收割台img{ 浮动：左；宽度：18.5em；利润上限：15px } .导航链路{ 位置：相对位置；浮动：对；填充：30px 45px 15px 20px； } #英雄{ 宽度：100%；位置：相对位置；顶部：120px；右边距：自动； } 定价工作原

基本上我想做这个

。。。像这样居中对齐：

但是，似乎“浮动”正在干预这一点。如何以一种简单的方式修复此问题，使第一个图像看起来像第二个代码

产品页面
身体{
背景：#eee；
字体系列：“Lato”，无衬线；
}
#收割台img{
浮动：左；
宽度：18.5em；
利润上限：15px
}
.导航链路{
位置：相对位置；
浮动：对；
填充：30px 45px 15px 20px；
}
#英雄{
宽度：100%；
位置：相对位置；
顶部：120px；
右边距：自动；
}


定价
工作原理
特征
手工制作的、自制的杰作

将#hero的CSS更改为：

并添加“溢出：隐藏”css以更正浮动：

#header{
    overflow: hidden;
}

我将从浮子（在快速响应的世界中很难很好地调整大小）转移到flexbox，它为您提供了对大小的高度控制。或者只是将其居中对齐，而不是浮动。是的，我将学习如何使用它。谢谢多米尼克，请你理解我对你的期望。不鼓励发表“谢谢”的评论。

<body>

    <header id="header">

     <img src="trombones.jpg" id="header-img">

     <nav id="nav-bar">

     <div class="nav-link">Pricing</div>
     <div class="nav-link">How It Works</div>
     <div class="nav-link">Features</div>

     </nav>

    </header>

    <div id="hero">
     <h2>Handcrafted, home-made masterpieces</h2>
    </div> 

</body>

#hero {
    text-align: center;
}

#header{
    overflow: hidden;
}