<分区>
<分区>
在本例中，我想将“3”在“list-li”元素中垂直居中，因为同级元素具有动态高度。我尝试使用:
position: relative;
top: 50%;
..但它似乎不起作用。
HTML:
<ul class="list-1">
<li>
<div class="list-1-num">
3
</div>
<div class="list-1-content list-1-content-signup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum.
</div>
</li>
</ul>
CSS:
.list-1 {
font-size: 20px;
list-style: none;
}
.list-1 li {
margin-bottom: 70px;
overflow: hidden;
text-align: left;
list-style: none;
}
.list-1-num {
float: left;
font-size: 25px;
margin-right: 20px;
}
.list-1-content {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 45px 40px;
float: left;
width: 300px;
line-height: 25px;
}
Codepen 演示:https://codepen.io/aguerrero/pen/OZevgJ
最佳答案
您可以使用 Flexbox 而不是 float 并在父级上设置 align-items: center。
.list-1 {
font-size: 20px;
list-style: none;
}
.list-1 li {
margin-bottom: 70px;
overflow: hidden;
text-align: left;
list-style: none;
display: flex;
align-items: center;
}
.list-1-num {
font-size: 25px;
margin-right: 20px;
}
.list-1-content {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 45px 40px;
width: 300px;
line-height: 25px;
}<ul class="list-1">
<li>
<div class="list-1-num">
3
</div>
<div class="list-1-content list-1-content-signup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur venenatis, lectus cursus cursus elementum.
</div>
</li>
</ul>关于html - 如何垂直居中具有较高兄弟元素的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50526992/