Выравание по вертикали и в одну линию svg и текст, как выровнять икионку?

Question

[Антон Вебсайтовский]

Всех с наступающим.

Первый вопрос:
Через флекс выравниваю все что внутри блока, есть еще 3 блока, это контакты, в них иконка svg и текст на против, так вот все выравнивает хорошо, но svg выравнивает не по центру, а по линии конца текста. А надо по середине чтоб было, как реализовать? используя флекс.
Иконки правда не видно, видно квадратик, но видно что он не совсем по центру.
Рабочий пример: https://jsfiddle.net/1Lj2tdh9/2/

И второй вопрос:
В блоке есть 4 блока, 3 блока по левую сторону должны и они идут по левую, а 4 блок по правую сторону, через justify-content: space-between;, можно реализовать? знаю что он делить два блока, первый блок делает по левую, а второй блок по правую. Как через флекс так сделать? чтобы три блока в блоке по левую, а четвертый по правую. (можно конечно применить float:right;.
Тот же рабочий пример: https://jsfiddle.net/1Lj2tdh9/2/

Comments

[Алексей]

Зачем вы для иконок используете тег i а потом на него навешиваете псевдоэлемент. Неужели сложнее навесить before на сам элемент?

[Антон Вебсайтовский]

Алексей, а это как? ну я давно использую этот метод, и чет не задумывался особо что можно и по другому, особо проблем не было с i

[Алексей]

Антон Вебсайтовский, просто before навешиваете на класс с текстом и позиционируете относительно него

[Антон Вебсайтовский]

Алексей, надо будет попробовать. а текст наезжать не будет, тогда надо будет текст во что-то оборачивать и делать отступ. надо проверить будет и посмотреть что будет.

Answer 1

[Алексей Орлов]

Ответ на первый вопрос:
Я так понимаю, нужно чтобы иконка была вертикально выравнена по центру относительно текста. Если да, то:

.cnt {
display:flex;
align-items:center;
}

Ответ на второй вопрос:
Оберните левый блок (первые 3 блока) в div и правый блок (4 блок) в div , далее сделайте для них общий div (контейнер) и задайте justify-content: space-between;

Comments

[Антон Вебсайтовский]

Ага по первому вопросу, сработало, точно )
По по второму так и сделано, общий блок в котором все эти 4 блока и каждый блок в диве, а если 3 блока не оборачивать в див дополнительный, я мог и обернуть, по этому я и задал вопрос чтобы не оборачивать.

[Алексей Орлов]

Антон Вебсайтовский, Можно например так:

.cnt{
  color: #000;
  font-size: 16px;
  display:flex;
  align-items:center;
  flex:1;
}
.cnt:last-child {
  justify-content:flex-end;
}

[Антон Вебсайтовский]

Алексей Орлов, ага, точно, последний див прижем права ! ну или просто флоат ригхт применить и все.

[Антон Вебсайтовский]

Хотя нет, флоат ригх не срабатывает )

[Антон Вебсайтовский]

Алексей Орлов, а если последний блок не див, а кнопка.

<a href="" title="Записаться онлайн" class="zap">Записаться онлайн</a>

[Алексей Орлов]

Антон Вебсайтовский, это ссылка, а не кнопка) , просто оберни её в див

[Антон Вебсайтовский]

Алексей Орлов, почему ссылка ), у меня она выглядит как кнопка, значит кнопка. просто зачем див, если кнопку можно и без дива сделать ), я вот стараюсь чтобы в коде лишнего не было ) ссылке дисплай блок прописываем и ура вот и кнопка.


вот думаю теперь, как ее к правому боку присобачить, флоат ригхт не срабатывает.

[Антон Вебсайтовский]

Алексей Орлов, подскажешь как с кнопкой быть? которая не в div блоке.

[Антон Вебсайтовский]

Нашел метод как прижать кнопку.

<a href="" title="Записаться онлайн" class="zap">Записаться онлайн</a>

.zap{
  display: block;
height: 35px;
  line-height: 35px;
  background: #F8A717;
  color:#000;
  text-align: center;
  padding: 0 20px 0 20px;
  text-transform: uppercase;
  margin-left: auto;
}

margin-left: auto; - творит чудеса, и не пришлось оборачивать три блока слева в див и саму кнопку )

Подобный пример вот тут: https://jsfiddle.net/a0hz7hp1/3/