如何在导航<li>元素中居中对齐文本？</li>

Question

我正在为学校做一个PHP项目，我希望我的标题导航列表文本居中，但text-align: center;或vertical-align: middle;都不起作用。有什么建议吗？

http://ectweb.cs.depaul.edu/AHARDEN2/project/index.php

Answer 1

在第241行的style.css中添加宽度和边距：auto。删除所有引用nav和ul的浮动。

Answer 2

body > nav {
    text-align: center;
}

body > nav > ul {
    display: inline-block;
    float: none;
}

Answer 3

在CSS中，最好的方法通常是：

对于文字：

.centredText {
  margin-left: auto;
  margin-right: auto;
  width: 4em; /* This is whatever size you need each margin to be. */
}

对于div或图像（听起来像这样）：

.centredItem {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

然后在您的HTML中<div class="centredItem">Stuff</div>