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

概述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;

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 >	      <div >      Image      </div>        <nav >         <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/

解决方法 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 >	      <div >      Image      </div>        <nav >         <ul>          <li> Longer text</li>          <li> Short </li>          <li> X </li>        </ul>      </nav>      </div>

如果你也想要垂直居中,那么有很多技巧 – 最快和最脏的方法是在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 */}

<div >  <div >    Image  </div>  <nav >    <ul>      <li>Very long text with line wrapPing</li>      <li>Short</li>      <li>X</li>    </ul>  </nav></div>

总结

以上是内存溢出为你收集整理的html – >元素中的文本对齐中心全部内容，希望文章能够帮你解决html – >元素中的文本对齐中心所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。