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

Posted 2023-03-05

【中文标题】<li> 元素中的文本居中对齐

【英文标题】：text-align center in <li> element

【发布时间】：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”添加到您的“”元素中？

是的，但它会将 元素置于中心。不是 元素中的文本。

@Michi 你想让文本垂直对齐吗？

***.com/questions/33049010/how-to-center-text-in-li

我已经尝试使用text-aling: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 用于 horizo​​ntal 和 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>