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/
解决方法
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>
如果你也想要垂直居中,那么有很多技巧 – 最快和最脏的方法是在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 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。