我的网站的中心导航按钮

Question

    <nav>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php?about">About</a></li>
            <li><a href="index.php?products">Products</a></li>
            <li><a href="index.php?blog">Blog</a></li>
            <li><a href="index.php?contact">Contact</a></li>
        </ul>
    </nav>

这是包含其中内容的列表。

nav ul li{
    list-style: none;
    float: left;
}

nav ul li a{
    text-decoration: none;
    display: block;
    float: left;
    padding: 5px 15px;
    color: white;
}

这些是它目前拥有的CSS，我似乎无法使它们成为中心。我环顾了一个小时左右，但是我对这个领域目前的技能几乎没有任何好运。

Answer 1

Flexbox是一种让事情发生的好方法。

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav li {
  margin: 0 30px;
}

你想让<li>排队并坐在中间位置。首先，您需要抓住他们的父母（<ul>）并告诉它使用Flexbox。

弯曲方向可以是行或列。你希望他们排成一排。

一旦他们排队，在中心证明他们是合理的。

<li>本身的边缘只是让它们不重叠。

Answer 2

使用float: css样式直接将内容移动到其设置方。要使元素居中，请使用auto设置边距或填充。 margin-left: auto; margin-right: auto;将通过在两侧使用相同数量的边距或填充将一个元素置于其容器中。

更快的方法是margin: y-margins auto;第一个值是你的margin-top和margin-bottom值，第二个值是你的左右。

要在其容器中居中文本，例如<p>标记，请使用text-align: center;