我想使用flexbox在<li>
中垂直对齐一些内容,但效果不是很好。
我在网上查过了,许多教程实际上使用了一个包装器div,它从父组件的flex设置中获取align-items:center
,但我想知道是否有可能去掉这个额外的元素?
在这种情况下,我选择使用flexbox,因为列表项高度将是一个动态%
。
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height: 20%;
}
<ul>
<li>This is the text</li>
</ul>
发布于 2020-09-04 11:59:16
将li
中的显示设置为flex,并将align-items
设置为center
。
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}
我个人也会针对伪元素并使用border-box
(Universal selector * and pseudo elements)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
发布于 2020-05-03 19:13:46
使用display: flex
可以控制HTML元素的垂直对齐方式。
.box {
height: 100px;
display: flex;
align-items: center; /* Vertical */
justify-content: center; /* Horizontal */
border:2px solid black;
}
.box div {
width: 100px;
height: 20px;
border:1px solid;
}
<div class="box">
<div>Hello</div>
<p>World</p>
</div>
发布于 2020-07-04 02:22:03
这取决于你的li的高度,再说一句就行高
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height:50px;line-height:50px;
}
<ul>
<li>This is the text</li>
</ul>
https://stackoverflow.com/questions/25311541
复制相似问题