Question

我有一个项目列表。每个项目左侧都有一个图标（fontawesome），右侧是文本。很遗憾，我无法对齐这些项目。

我的CSS和HTML代码是：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

（不幸的是，代码段无法运行图标）我想要做的就是完全对齐。你可以找到我迄今为止所做的一切。有人可以帮帮我吗？

typeInfo

Answer 1

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

align-items：center将两个弹性项目垂直对齐。

Answer 2

由于您尝试使用两列，因此您的Flex容器（“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>

将列表中的图标（左侧）和文本（右侧）对齐

2 个答案: