问题描述
当前在网上查找东西,看看该怎么做,当我设置行高时,它似乎对我不起作用,我只是想在将来发短信。我的下一步是flexBox,但我正在尝试学习如何使用当前的功能:如果有人可以给我发送解释性操作的参考链接;很好。
解决方法
我假设您希望ul
li
垂直位于底部,水平居中对齐。基于这个假设,我编写了这段代码。希望这对您有所帮助。
摘要:
#topbar {
background: gray;
height: 10rem;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-end;
}
#topbar ul {
margin: 0;
padding: 0;
}
#topbar li {
text-align: center;
vertical-align: top;
display: inline-block;
}
<body>
<div id="topbar">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</body>
,
您的文字已经对齐。
但是,为了将来参考,只需使用Flexbox,它就容易很多了,问题也更少了。
在容器中,分别给其display: flex
,justify-content: center
和align-items: center
。
然后,您只能为<li>
摘要:
#topbar {
background: gray;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
}
#topbar li {
line-height: 10rem;
list-style: none;
}
#topbar li:not(:first-child) {
margin-left: 5px;
}
<body>
<div id=topbar>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</div>
</body>