The text along side the icons are not aligning properly

user_6471440 0
Viewed 947

My question is is flexbox necessary or is there any easy way around to get it done. it been a long time since I practised , so I do not recall anything. 

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
}
<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>mail@domain.com</p>
    </li>
  </ul>
</div>
</div>

this is how its looking now

this is how I want it to look like

]2

flexbox css-grid css html
3 Answers

So I have done the below changes to your code:

  1. Moved the background and dimensions from li element to i.
  2. Removed justify-content: center from li
  3. Center the icon in i by using a centered flexbox.
  4. Reset the default padding of ul to zero.

See demo below - I guess you can take it forward from here:

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  /*width: 35px;*/
  /*height: 35px;*/
  /*background: #1f76bd;*/
  /*margin-bottom: 5px;*/
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
  /* ADDED THE BELOW */
  /* These style were applied to li before */
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  /* Adding a separation margin */
  margin-right: 5px;
  /* Centering the icon */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts ul {
  padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>mail@domain.com</p>
    </li>
  </ul>
</div>
</div>

user_62311530

Look at this:

Use background color for only icon container.

 .youclass {
   display: inline;
    width: 35px;
    background: #1f76bd;
    height: 35px;
    margin-right: 10px;
 }
 
 .sadaka-contacts p {
    color: #115c9b;
    font-size: 14px;
    line-height: 1.42;
}

.sadaka-contacts li {
    list-style: none;
    height: 35px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

}

.sadaka-contacts li i {
    color: white;

}
<div id= "contact-area" class="sadaka-contacts">
        <h3>SADAKA CONTACTS</h3>
        <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>

        <ul>
            <li>
                <div class="youclass">
                  <i class="fa fa-map-marker"></i>
                  </div>
                <p>135 Hay el nahda, Rabat, Morocco</p>
            </li>
        </ul>
    </div>
</div>

user_100460990

Following are the steps I took to generate the UI you want it to look like:

  1. Consider everything is a flex with items aligned on column. So style the parent class 'sadaka-contacts' as,

    .sadaka-contacts { border: 1px solid black; color: #4040a1; display: flex; height: 240px; flex-direction: column; justify-content: space-between; }

  2. Add bottom border for the title:

    .sadaka-contacts h3 { border-bottom: 1px solid blue; }

  3. Since a web browser automatically adds a margin of 16px for p elements, remove it and add remaining styles for body as:

    .sadaka-contacts p { color: #115c9b; font-size: 14px; line-height: 1.42; margin: 0; }

  4. Browser also adds padding and margin for ul elements. Remove it and add remaining styles as:

    .sadaka-contacts ul { margin: 0; list-style: none; padding: 0; }

  5. Now we come to the part where you're seeing the overlap of icons and text. For this, we will make the li element as a flex in itself with row as flex direction (as against column direction of parent). Note that, I'm using alphabets in place of actual images. You can replace that as you like. The styles for list items goes like this:

    .sadaka-contacts ul > li { display: flex; flex-direction: row; }

  6. As mentioned earlier, I'm using boxed alphabets which are styled as:

    .sadaka-contacts ul > li > i { border: 1px solid #115c9b; border-radius: 12px; color: white; background: #115c9b; margin: 4px; min-width: 24px; padding: 4px; }

  7. Finally we horizontally align the list items text exactly at center using 'align-self' property set to 'center'. The style for the text is as:

    .sadaka-contacts ul > li > p { align-self: center; }

Hope this helps.

user_12639040
Related