Question

我一直在尝试通过编辑我从互联网上获得的网站模板（它使用bootstrap）来学习css / html，但我遇到了障碍。我有一个水平元素列表。我希望这些元素居中，但我不知道如何。这是代码：

<div class="row">
    <nav>
        <ul>
            <li><a href="#about">Over ons</a></li>
            <li><a href="#services">Diensten</a></li>
            <li><a href="#work">Projecten</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</div>

这导致4个元素是水平的，但它们不是居中的，我不知道如何将它们居中。

我是css / html的新手，所以如果您需要更多信息，请询问。

编辑：我在css中看了一下，发现了这个：

header ul { padding-top: 0px; text-align:center}
header ul li { list-style: none; float: left; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
header ul li a { display: block; margin: 0 30px; color: #4d4959; text-align: center;}

我添加了text-align：center;但这似乎不起作用

Answer 1

只需添加此CSS，文本就会居中：

＆＃13;

li {
  text-align:center;
}

＆＃13;

<div class="row">
    <nav>
        <ul>
            <li><a href="#about">Over ons</a></li>
            <li><a href="#services">Diensten</a></li>
            <li><a href="#work">Projecten</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</div>

＆＃13;

Answer 2

使用：text-align:center如下： Demo

Answer 3

如果宽度设置为.row，则可以使用

.row{ margin: auto;}

你的div上的

将居中。我认为li元素彼此相邻（水平和“.row”），所以这可能有效。

如何在css / html中居中列表链接

3 个答案: