Текст вдоль боковых значков выровнен неправильно

Question

Мой вопрос - необходим ли flexbox или есть ли простой способ сделать это?С тех пор, как я тренировался, прошло много времени, поэтому я ничего не помню.

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

вот как это выглядит сейчас

так я хочу, чтобы это выглядело

] 2

Answer 1

Ниже приведены шаги, которые я предпринял для создания пользовательского интерфейса, на который вы хотите, чтобы он выглядел:

1. Считайте, что все изгибается, элементы выровнены по столбцу Так что стиль родительского класса 'sadaka-contacts' как,

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

2. Добавить нижнюю границу для заголовка:

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

3. Поскольку веб-браузер автоматически добавляет поле в 16px для элементов p , удалите его и добавьте остальные стили для тела в виде:

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

4. Браузер также добавляет отступы и поля для элементов ul . Удалите его и добавьте остальные стили как:

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

5. Теперь мы подошли к той части, где вы видите наложение значков и текста. Для этого мы создадим элемент li как сам по себе изгиб с направлением изгиба строки (против направления столбца родителя). Обратите внимание, что я использую алфавиты вместо реальных изображений. Вы можете заменить это, как вам нравится. Стили элементов списка выглядят так:

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

6. Как упоминалось ранее, я использую алфавиты в штучной упаковке, которые имеют вид:

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

7. Наконец, мы горизонтально выравниваем текст элементов списка точно по центру, используя свойство align-self, установленное в center. Стиль текста такой:

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

Надеюсь, это поможет.

Answer 2

Итак, я внес следующие изменения в ваш код:

1. Фон и размеры перемещены с элемента li на i.
2. Удалено justify-content: center из li
3. Отцентрируйте значок в i, используя по центру flexbox.
4. Сброс по умолчанию padding из ul в ноль.

См. Демонстрацию ниже - я думаю, вы можете перенести ее отсюда:

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

Answer 3

Посмотрите на это:

Используйте цвет фона только для контейнера значков.

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