Как сверстать header?

Question

[DanilaBodrov]

Есть иконка с текстом слева, которые ведут на другой сайт, логотип по середине и номер телефона справа. Как правильно свертстать, чтобы всё было по середине? Bootstrap не использую. Без Flex.

Comments

[Иван]

Тут не клуб гадалок,скриншот пожалуйста ) А вообще гляньте флекса

[DanilaBodrov]

Иван, 3 блока. Слева, по середине, справа. Вертикально по середине. Ничего не обычного. Но у меня не получается.

[DanilaBodrov]

Иван,

Answer 1

[Ankhena]

На флексах: https://jsfiddle.net/6ury9q31/
без флексов: https://jsfiddle.net/5uf9km81/ (чтобы убрать пробелы - обнулить шрифт родителя и вернуть его детям)

Вертикальное:
https://jsfiddle.net/9y6b4aws/

Comments

[DanilaBodrov]

А как сделать такой прижатый текст в двух строках?

[Ankhena]

DanilaBodrov, float'ом

Answer 2

[Insayt]

Если использовать flex то вот так https://jsfiddle.net/yaembbmb/

Comments

[DanilaBodrov]

Без флекса на флоатах

[Insayt]

DanilaBodrov, тогда примерно так https://jsfiddle.net/yaembbmb/1/

[DanilaBodrov]

Insayt,

А как сделать такой прижатый текст в двух строках?

Answer 3

[Василь Бойко]

<div class="row">
  <div class="col-4">1</div>
  <div class="col-4">2</div>
  <div class="col-4">3</div>
</div>

.row:before,
.row:after{
    height: 0;
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
}

.row{
    margin: 0 -15px;
}

.col-4{
    padding: 0 15px;
    float: left;
}

.col-4 {width: 33.33333333%;}

Comments

[DanilaBodrov]

Не bootstrap

[DanilaBodrov]

[Конан Варвар]

DanilaBodrov, так это и есть НЕ бутстрап. Человек вам просто классы так назвал. Вы хоть немного понимаете в области Вашего вопроса?

[DanilaBodrov]

JaredWinter, Вопрос риторический

Answer 4

[Дима Паутов]

Вот вам флоаты, херли тут думать. Нада по центру, добавьте отступы эти блокам по краям.

Либо, воспользоваться display: table и display: table-cell, если флексы нельзя. Тогда всё отцентрируется. Чё тут думать, я хз!!

Comments

[DanilaBodrov]

Спасибо Димас