html 文本位置中心,html – >元素中的文本对齐中心

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;

}

Image

• Longer text
• Short
• X

如果你也想要垂直居中,那么有很多技巧 – 最快和最脏的方法是在li元素上添加一些padding-top,或者设置一个与整个元素的高度相匹配的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 */

}

Image

• Very long text with line wrapping
• Short
• X