在列表中對齊圖標（左側）和文本（右側）

Question

我有項目清單。 每個項目的左側都有一個圖標（字體精美），右側是文本。 不幸的是，我無法對齊項目。

我的CSS和HTML代碼是：

 .colle ul { margin-left: -20px; } .colle ul li { list-style-type: none; margin-bottom: 35px; display: flex; } .colle ul li i { margin-right: 25px; } .colle ul li p { margin: 0; } 

 <div class="colle"> <ul> <li> <i class="fa fa-black-tie" style="color:#0e3c68;font-size:230%;"></i> <div style="color: #0e3c68;"> <strong>DIRECTOR: </strong><br> <strong>Francisco </strong><br><div style="color: #0e3c68;font-size:80%;line-height: 12px;">Universidad Francisco de Vitoria</div> </div></li> </ul> <li> <i class="fa fa-suitcase" style="color:#0e3c68;font-size:230%;"></i> <div style="color: #0e3c68;"> <strong>COMITÉ CIENTÍFICO ASESOR: </strong><br> <strong>Francisco </strong><br><div style="color: #0e3c68;font-size:80%;line-height: 12px;">Universidad Francisco de Vitoria</div> </li> <li> <i class="fa fa-mobile" style="color:#0e3c68;font-size:230%;"></i> <div style="color: #0e3c68;"><strong>CONTACTO: </strong><br> <strong>Francisco</strong><br><div style="color: #0e3c68;line-height: 12px;">9135567 ext. 2115</div> </li> </div> 

（不幸的是，代碼片段無法運行圖標）我想做的是使所有內容完全對齊。 您可以找到我到目前為止所做的圖像。 有人可以幫助我嗎？

Answer 1

    .colle ul li {
      list-style-type: none;
      margin-bottom: 35px;
      display: flex;
      align-items: center;
    }

align-items：居中將使兩個伸縮項目垂直居中對齊。

Answer 2

由於您嘗試具有兩列，因此您的伸縮容器（“ li”）應具有兩個子元素。 一個應該是（i.fa）圖標，另一個應該是一個容器（例如“ div”），該圖標旁邊帶有您想要的所有信息。

然后，您至少需要給圖標一個固定的寬度。 這將使事物保持一致。

我修改了您的代碼來做到這一點，並且還用類替換了內聯樣式。 這只是使其更具可維護性和可讀性。

在這里查看我的版本： https : //codepen.io/anon/pen/aEzQgM這是代碼：

.colle ul {
  margin-left: -20px;
}
.colle ul li {
  list-style-type: none;
  margin-bottom: 35px;
  display:flex;
}
.colle ul li i.fa {
  color:#0e3c68;
  font-size:230%;
  width:1em;
  height:1em;
}
.data1{
  color: #0e3c68;
  font-weight:bold;
}
.data2{
  color: #0e3c68;
  font-size:80%;
  line-height: 12px;
}
.data3{
  color: #0e3c68;
  font-size:80%;
  line-height: 12px;
}
.colle ul li p {
  margin: 0;
}



<div class="colle">
  <ul>
    <li>
      <i class="fa fa-black-tie">x</i>
      <div class="data">
        <div class="data1">DIRECTOR:</div>
        <div class="data2">Francisco</div>
        <div class="data3">Universidad Francisco de Vitoria</div>
      </div>
    </li>
    <li>
    <i class="fa fa-suitcase">x</i>
      <div class="data">
        <div class="data1">COMITÉ CIENTÍFICO ASESOR:</div>
        <div class="data2">Francisco</div>
        <div class="data3">Universidad Francisco de Vitoria</div>
      </div>
    </li>
    <li>
      <i class="fa fa-mobile">x</i>
      <div class="data">
        <div class="data1">CONTACTO:</div>
        <div class="data2">Francisco</div>
        <div class="data3">9135567 ext. 2115</div>
      </div>
    </li>
  </ul>
</div>