<li> 元素中的文本居中对齐答案

【问题标题】：text-align center in <li> element<li> 元素中的文本居中对齐
【发布时间】：2018-01-28 16:39:30
【问题描述】：

body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
    background-color: blue;
}

<div class="header">	

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> 1.0 Main Menu </li>
          <li> 2.0 Main Menu </li>
          <li> 3.0 Main Menu </li>
        </ul>
      </nav>
      
</div>

使用上面的代码，我创建了一个包含<image> 和<navigation> 的<header>。到目前为止，这一切都很好。

现在我希望<li> 元素内的文本出现在中心。因此，我尝试使用li CSS 中的属性text-align: center;，但没有成功。

为了使<li> 元素居中中的文本，我必须在我的代码中进行哪些更改？

你也可以在这里找到我的代码：https://jsfiddle.net/5jv8m5xf/39/

【问题讨论】：

您是否尝试将“text-align: center”添加到您的“
是的，但它会将
元素置于中心。不是
元素中的文本。

【解决方案1】：

text-align:center 确实使文本居中——但您必须为li 元素设置特定宽度；否则它们每个都会折叠到文本本身的宽度，因此居中不可见。

li {
  width: 100px; 
  text-align:center;
}
/* Everything below is the same as your original code */
body {
 margin: 0;
}

.header {
    width: 80%;
    height: 20%;
    margin-left: 10%; 
    position: fixed;
    top: 0; 
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.image {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

.navigation {
    width: 79%;
    height: 100%;
    float: right;
    text-align: right;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
}

ul {
    height: 100%;
    font-size: 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: yellow;
}

li {
    height: 100%;
    font-size: initial;
    display: inline-block;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    background-color: blue; 
}

<div class="header">	

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
        <ul>
          <li> Longer text</li>
          <li> Short </li>
          <li> X </li>
        </ul>
      </nav>
      
</div>

如果你也想要垂直居中，有很多技巧——最快和最脏的方法是将一些padding-top 添加到li 元素，或者设置一个匹配高度的line-height整个元素。

但对于这种特殊设计，更简洁的解决方案可能是切换到 flexbox；代码稍微简单一些，它解决了li 中的文本换行时出现的布局问题：

.header {
  background-color: yellow;
  display: flex;
  justify-content: space-between; /* Puts the image at far left, nav at far right */
}

.image {
  width: 100px;
  background-color: green
}

ul {
  display: flex; /* Puts the `li` in a row */
  list-style: none; margin: 0; padding: 0;
  background-color: blue;
  height: 100px;
}

li {
  border: 1px solid;
  width: 100px; /* Alternatively, you could set a specific width on the ul, and use flex-grow:1 here to make all the li elements the same width */
  display: flex; /* allows align-items to work below */
  justify-content: center; /* Horizontally centers single-line elements */
  text-align:center; /* Horizontally centers text within line-wrapped elements */
  align-items: center; /* vertical */
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li>Very long text with line wrapping</li>
      <li>Short</li>
      <li>X</li>
    </ul>
  </nav>
</div>

【讨论】：

您好丹尼尔，感谢您的回答。它似乎只适用于垂直对齐。我必须改变什么才能使其水平工作？
现在文本水平居中但不是垂直居中。垂直居中有多种不同的技术。需要对现有代码进行最少更改的方法是向li 元素添加一些padding-top，或者设置一个与元素本身高度匹配的line-height。
但这两个都有点老套。老实说，如果我的目标是这种设计，我会重新开始并在 flexbox 中进行，除非您需要支持非常过时的浏览器。给我一点时间，我会举一个例子。
嗨丹尼尔，对不起。是的，我的意思是垂直的。我尝试了行高。它会让我实现我的目标，但我想 flexbox 解决方案可能是另一种现代方法。期待你的榜样。
@Michi 已更新。我也在 flexbox 版本的 li 元素上设置了一个特定的宽度；根据您的设计，您也可以为ul 设置宽度，并在li 上使用flex-grow:1 让它们在该区域内设置自己的相同大小。

【解决方案2】：

为li 设置一个宽度，使text-align: center 具有相关性。

使用 psuedo 元素垂直对齐元素的一种方法 - 将 vertical-align: middle 添加到您的 li 和此 psuedo after元素到你的 CSS：

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

请看下面的演示：

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  text-align: center;
  vertical-align: middle;
}

li:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

如果 flexbox 是您可以使用 display: inline-flex 的选项，那么事情就像添加 justify-content: center 用于 horizontal 和 align-items: center 用于垂直对齐。

请看下面的演示：

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 20%;
  margin-left: 10%;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.image {
  width: 20%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation {
  width: 79%;
  height: 100%;
  float: right;
  text-align: right;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  font-size: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

li {
  height: 100%;
  font-size: initial;
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
  /*ADDED THESE*/
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

<div class="header">
  <div class="image">
    Image
  </div>
  <nav class="navigation">
    <ul>
      <li> 1.0 Main Menu </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

【讨论】：