我网站的居中导航按钮

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

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

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

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

Answer 2

Flexbox 是让事情随心所欲的好方法。

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

nav li {
  margin: 0 30px;
}

你想让 <li> 排成一排，坐在中间。首先，您需要获取它们的父对象（<ul>）并告诉它使用 Flexbox。

弹性方向可以是行或列。你想让他们排成一排。

排列好后，将它们放在中间。

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

我网站的居中导航按钮

Centering Navigation buttons for my website

html

css

html-lists

nav