リスト内のアイコン（左）とテキスト（右）を整列します

Question

私はアイテムのリストを持っています。各項目は、左にアイコン（fontawesome）、右にテキストがあります。残念ながら私はアイテムを整列できません。

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

（残念ながら、コードスニペットは、アイコンを実行することはできません）私は何をしようとしているが、すべてが完璧に揃いましたさ。あなたは今まで何をしたのかのイメージを見つけることができます。誰でも私を助けることができますか？

Answer 1

2つの列があるため、フレックスコンテナ（「li」）には2つの子要素が必要です。 1つは（i.fa）アイコンで、もう1つはコンテナ（たとえば「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> 

Answer 2

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

ALIGN-アイテム：センターは、垂直方向に中央の両方のあなたのフレックスアイテムを揃えます。