[英]Vertical alignment of text in li
I've been fooling around with HTML/CSS recently, and I'm trying to vertically align the text in an li
so that it is in the center. 我最近一直在用HTML / CSS鬼混,并且试图在
li
垂直对齐文本,以便使其居中。 I've seen this question (or some variation of it) asked a bunch of times, so I apologize in advance for asking a question I'm sure you're tired of seeing, but I can't get any of the suggested solutions to work. 我已经看过这个问题(或它的某种变体)很多次了,所以我提前为这个问题道歉,我确信您已经厌倦了,但是我无法获得任何建议的解决方案上班。 I'm also trying to avoid setting a specific
height
/ line-height
for the li
, since I'd like this to adjust to the size of the screen. 我还试图避免为
li
设置特定的height
/ line-height
,因为我希望这可以调整为屏幕尺寸。
Here's the HTML: 这是HTML:
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Experience</a></li>
<li><a href="">Contact</a></li>
</ul>
Here's the CSS: 这是CSS:
#nav {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: block;
height: 100%;
}
#nav li a:hover {
background: #ccc;
}
I also have this fiddle set up in case you'd like to mess around with it and see if you can get it working. 我还设置了这个小提琴 ,以防您想弄乱它,看看是否可以使其正常工作。 Thanks!
谢谢!
You can just make the line-height of #nav li 25% of the viewport height like so 您可以像这样将#nav li的行高设置为视口高度的25%
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
line-height: 25vh; /* this is the only thing you need to add */
}
It's very simple and short and will work with any changes to the text (like font-size etc) or the list. 它非常简单,简短,可以处理文本(如字体大小等)或列表的任何更改。 It doesn't matter how many items you add or remove from the list or what changes you make to the height of the #nav or its list items.
您可以从列表中添加或删除多少项,或者对#nav或其列表项的高度进行什么更改都没有关系。 See the first working revision of your jsFiddle ;)
请参阅jsFiddle的第一个工作修订版 ;)
Set display: table;
设置
display: table;
on your li
and 在你的
li
和
display: table-cell;
vertical-align: middle;
on your a
在你
a
final styles: 最终样式:
#nav li {
display: table;
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
}
#nav li a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
Try these changes in your css 在CSS中尝试这些更改
#nav li {
text-align: center;
height: 25%;
width: 100%;
margin: 0 auto;
display: table; /* added */
}
#nav li a {
display: table-cell; /* changes from block to table-cell */
vertical-align: middle; /* added */
height: 100%;
}
See the working example here http://jsfiddle.net/t6ryfqzk/7/ 在这里查看工作示例http://jsfiddle.net/t6ryfqzk/7/
Try making your li
an inline-block
if you want them next to eachother, or as block if you want them underneath eachother. 如果要让
li
彼此相邻,请尝试使其成为inline-block
块;如果希望它们在彼此之下,请尝试将其成块。 Make sure you give the li
elements a fixed width, and set their text-align as centered
. 确保为
li
元素提供固定的宽度,并将它们的text-align设置为centered
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.