我有一个代码 - https://codepen.io/anon/pen/MQjpBG
这是一个简单的列表,每个 li 中有一个彩色块和文本
我需要垂直的列表和垂直对齐的文本和块。
我正在尝试使用 flex 和 align-items 来做到这一点,但文本和块永远不会完全居中
我做错了什么,有没有更好的方法来做到这一点。
.element{
display: flex;
list-style: none;
&__item{
display: flex;
align-items: center;
margin-right: 10px;
&:last-of-type{
margin-right: 0;
}
&-square{
background: red;
//display: block;
display: inline-block;
height: 20px;
width: 20px;
}
&-text{
font-weight: bold;
}
}
}
我希望块和文本像这样适合。
align-items: center;
似乎这样做,但它有点偏离,就像最佳答案
没有任何东西使它们居中(在您的代码笔中)。
将此添加到您的代码中:
.element{
display: flex;
justify-content: center; /* horizontal alignment */
.element__item {
display: flex; /* nested flex container */
align-items: center; /* vertical alignment */
}
revised codepen
关于html - flex align-items 中心不居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48648630/