个人中心
gpt4 book ai didi

html - 中心导航栏元素(链接和图像)

转载 作者：行者123 更新时间：2023-11-28 04:16:09 26 4
gpt4 key购买 nike

所以我正在重新创建 Apple 的网页(不完全相同，但我采用了他们的一些设计)并且我想将导航栏元素居中。

我试过使用 text-align 和 align (center)，但它什么也没做，我想这可能是因为它是一个固定的条，但我不知道是什么导致它不对齐到中心。

JsFiddle:https://jsfiddle.net/wsjkkLpL/ 

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

提前致谢。

最佳答案

float: left在 li造成这个。您可以使用:

关于html - 中心导航栏元素(链接和图像)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42473673/

26 4 0
文章推荐： html - 如何使两个图像具有固定高度和纯 CSS 响应？
文章推荐： javascript - 避免在javascript中转义特殊字符
文章推荐： javascript - 单击输入类型文本后检查单选输入
文章推荐： c++ - 为什么这不会编译？三角函数