CODEWITHSUNDEEP
listflexboxicons
Stefano
Stefano

Reputation: 143

Align icons (on the left) and text (on the right) in a list

I have a list of items. Each item has an icon (fontawesome) on the left and text on the right. Unfortunately I'm not able to align the items.

My CSS and HTML code is:

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

(Unfortunately the code snippet can't run the icons) What I'm trying to do is having all perfectly aligned. You can find an image of what I have done up to now. Anyone can help me?

enter image description here

Upvotes: 0

Views: 3025

Answers (2)

Adam Weston
Adam Weston

Reputation: 26

Since you are trying to have two columns, your flex container (the "li") should have two child elements. One should be the (i.fa) icon, and the other should be a container (e.g "div") with all of the info that you want next to the icon.

Then, you need to give at least the icon a fixed width. This is what will align things.

I modified your code to do that, and also replaced your inline styles with classes. That just makes it more maintainable and readable.

See my version here: https://codepen.io/anon/pen/aEzQgM Here is the code:

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

Upvotes: 1

awebdev
awebdev

Reputation: 1127

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

align-items: center will align both your flex items vertically center.

Upvotes: 0

Related Questions