Question

基本上我想做这个...

this line "Handcrafted, home-made masterpieces"

...居中并对齐，如下所示：

this code

但是，似乎“浮动”干扰了这一点。您将如何以一种简单的方式解决该问题，以使第一个图像看起来像第二个代码？

<title>Product Page</title>

<style type="text/css">

    body{
        background: #eee;
        font-family: 'Lato', sans-serif;
    }

    #header-img{
        float: left;
        width:18.5em;
        margin-top: 15px
        }
    .nav-link{
        position: relative;
        float:right;
        padding: 30px 45px 15px 20px;
    }

    #hero{
        width: 100%;
        position: relative;
        top: 120px; 
        margin-right: auto;
    }

</style>

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

Answer 1

将#hero的CSS更改为：

#hero {
    text-align: center;
}

并添加“ overflow：hidden” css以纠正浮点数：

#header{
    overflow: hidden;
}

如何在不使用float的情况下正确对齐此导航栏？

1 个答案: