垂直对齐div内的列表项答案

【问题标题】：Vertical align list items inside div垂直对齐div内的列表项
【发布时间】：2020-05-18 20:36:42
【问题描述】：

我想在 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 中垂直对齐列表项，因为默认情况下列表项是垂直对齐的。

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

您能否检查一下下面的代码，希望它能解决您的问题。

<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>

【讨论】：

【解决方案2】：

您可以使用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'

【讨论】：