Html <li> 元素中的文本对齐居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45782973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align center in <li> element
提问by Michi
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>With the above code I have created a <header>containing of an <image>and a <navigation>. All this works fine so far.
使用上面的代码，我创建了一个<header>包含 an<image>和 a 的内容<navigation>。到目前为止，所有这些都运行良好。
Now I want that the textinside the <li>element appears in the center. Therefore, I tried to go with the property text-align: center;in the li CSSbut it did not work.
现在我希望元素内的文本<li>出现在中心。因此，我尝试使用 中的属性text-align: center;，li CSS但它没有用。
What do I have to change in my code to get the textwithin the <li>elements centered?
我必须在代码中更改什么才能使元素中的文本居中？<li>
You can also find my code here: https://jsfiddle.net/5jv8m5xf/39/
你也可以在这里找到我的代码：https: //jsfiddle.net/5jv8m5xf/39/
回答by Daniel Beck
text-align:centerdoes center the text -- but you have to set a specific width for the lielements; otherwise each of them just collapses to the width of the text itself, so the centering isn't visible.
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>If you want vertical centering as well, there are a bunch of techniques -- the quickest and dirtiest would be to either add some padding-topto the lielements, or set a line-heightthat matches the height of the element as a whole.
如果你想要垂直居中为好，有一堆的技术-最快和最肮脏的将是要么一些添加padding-top到li的元素，或设置line-height该元素作为一个整体的高度匹配。
But a cleaner solution for this particular design would probably be to switch over to flexbox; the code is a bit simpler and it solves the layout problems that occur when the text within a liwraps over multiple lines:
但是对于这种特殊设计，一个更简洁的解决方案可能是切换到 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>回答by kukkuz
Set a widthto the lifor text-align: centerto be relevant.
设置一个宽度为li的text-align: center是相关的。
One method of aligning elements verticallyusing a psuedoelment - add vertical-align: middleto your liand this psuedoafterelement to your css:
使用伪元素垂直对齐元素的一种方法- 将您和这个伪元素添加到您的 css：vertical-align: middleliafter
li:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
See demo below:
请参阅下面的演示：
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>If flexboxis an option you can use display: inline-flex, things can be as easy as adding justify-content: centerfor horizontaland align-items: centerfor verticalalignment.
如果flexbox是，你可以使用一个选项display: inline-flex，事情可以那么容易，因为增加justify-content: center的水平和align-items: center对垂直对齐。
See demo below:
请参阅下面的演示：
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>