<li>元素中的text-align center

时间：2017-08-20 14:03:50

标签： html css vertical-alignment centering 

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>

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

现在我希望<li>元素中的文字出现在中心中。因此，我尝试使用text-align: center;中的属性li CSS，但它不起作用。

我需要更改代码才能在<li>元素居中中获得文字？

您也可以在此处找到我的代码：https://jsfiddle.net/5jv8m5xf/39/

2 个答案:

答案 0 :(得分：10)

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>

答案 1 :(得分：3)

将宽度设置为li text-align: center为相关。

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

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

见下面的演示：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果 flexbox 是一个可以使用display: inline-flex的选项，那么就像为水平添加justify-content: center一样简单垂直对齐的align-items: center。

见下面的演示：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题