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

使用Is... css样式将内容直接移到其设置侧。要使元素居中，请为边距或填充使用float:集。 auto将通过在元素的两侧具有相同的边距或填充量来使元素在其容器内居中。

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

要将文本（例如margin-bottom标签）放置在容器中，请使用<p>

我的网站的居中导航按钮

2 个答案: