Question

所以我正在重新创建Apple的网页（不完全相同，但我正在采取他们的一些设计），我想将导航栏项目居中。

我尝试使用text-align和align（center），但它没有做任何事情，我认为这可能是因为它是一个固定的条形图，但我不知道是什么导致它不能与中心对齐。

<!DOCTYPE html>

<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>

<ul>
    <img src="images/logo.png">
    <li><a href="#">iPhone</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPod</a></li>
</ul>

<div id="ad">

    <center>
    <h3 class="blackh1">iPhone</h3>
    <h2 class="blackh1">This is 7.</h2>
    <img src="images/iphone.jpg" class="iphoneimg">
    </center>

</div>
<div id="product-container">
    <div id="product" class="product2">

        <h1 class="whiteh1">iPhone</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

    </div>
    <div id="product" class="product1">

        <h1 class="blueh1">iPad</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

    </div>
</div>
<div id="product-container2">

</div>

提前致谢。

Answer 1

问题是您在float: left元素上使用<li>。将其交换为display: inline-block，然后在text-align: center上设置<ul>。您还需要将图像移动到<li>块内：

<li><img src="images/logo.png"></li>

ul {
  text-align: center;
}

li {
  display: inline-block;
}

我创建了一个工作示例here。

希望这有帮助！：）

Answer 2

你只需要创建ul text-align：center，然后从li中删除float-left，并将其替换为display：inline-block。

更新了小提琴：https://jsfiddle.net/wsjkkLpL/1/

如果你想要垂直对齐的东西，左/右浮动是不行的。

进一步阅读：https://www.w3schools.com/css/css_navbar.asp

ul {
list-style-type: none;
background-color: rgba(10,10,10,0.85);
position: fixed;
width: 100%;
text-align: center;
}

li {
    display: inline-block;
}

Answer 3

float: left上的li导致此问题。您可以使用：

display: inline-block - <li>将被“视为文字”，因此text-align: center有效（https://jsfiddle.net/v7p9wjgt/）...
...或flexbox（https://jsfiddle.net/0krucs4w/），如果您想要更改窄/移动屏幕上的布局等，这可能很方便。

中心导航栏项目（链接和图像）

3 个答案: