我想垂直对齐div中的列表项,这就是我编写的代码:
<div>
<div class="span4">
<img style="float: left; width: 80px;" src="http://www.zalfaniyamen.com/wp-content/uploads/2020/02/200px-Dhofar_Club.png" />
</div>
<div>
<ul class="list-group" style="margin-bottom: 0 !important;">
<li class="list-group-item active" style="margin-left: 120px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 20px; font-weight: 600; width: 60%;">
Win super cup of sultun
</li>
</ul>
</div>
</div>
<div>
<div style="clear: both;"></div>
</div>
您能否检查以下代码,希望它能解决您的查询。
<div>
<div class="span4" style="vertical-align: middle;
display: inline-block;">
<img style="width: 80px;" src="http://www.zalfaniyamen.com/wp-content/uploads/2020/02/200px-Dhofar_Club.png" />
</div>
<div style="vertical-align: middle;
display: inline-block;">
<ul class="list-group" style="margin: 0;">
<li class="list-group-item active" style="margin-left: 120px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 20px; font-weight: 600; ">
Win super cup of sultun
</li>
</ul>
</div>
</div>
<div>
<div style="clear: both;"></div>
</div>
您可以使用display: flex
使其居中。
.parentDiv {
display: flex;
}
.span4 img {
float: left;
width: 80px;
}
ul {
margin-bottom: 0;
}
li {
margin-left: 100px;
padding-top: 0;
padding-bottom: 0;
font-size: 20px;
font-weight: 600;
}
<div class="parentDiv">
<div class="span4">
<img src="http://www.zalfaniyamen.com/wp-content/uploads/2020/02/200px-Dhofar_Club.png" />
</div>
<div>
<ul class="list-group">
<li class="list-group-item active">
Win super cup of sultun
</li>
</ul>
</div>
</div>
有关更多详细信息,您可以参考'vertical align'