为我的网站居中导航按钮

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。

Flex 方向可以是行或列。您希望它们排成一排。

一旦它们排成一列，就在中心对齐它们。

<li> 本身的边距只是防止它们重叠。

Answer 2

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

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

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