Как разместить иконку по центру div?

Question

[Chesterfield25]

Есть блок в линию у которого внутри 4 блока в каждом из 4-рёх блоков есть круги в которых расположены иконки. Как эти иконки выровнять по центру круга по вертикали?

<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

<div id="line_block"><div class="circle"><i class="fa fa-camera-retro fa-3x"></i></div><a href="https://obyavlenia.at.ua/board/rabota_i_biznes/1">Работа и бизнес</a></div>
<div id="line_block"><div class="circle"><i class="fa fa-camera-retro fa-3x"></i></div><a href="https://obyavlenia.at.ua/board/rabota_i_biznes/1">Работа и бизнес</a></div>
<div id="line_block"><div class="circle"><i class="fa fa-camera-retro fa-3x"></i></div><a href="https://obyavlenia.at.ua/board/rabota_i_biznes/1">Работа и бизнес</a></div>
<div id="line_block"><div class="circle"><i class="fa fa-camera-retro fa-3x"></i></div><a href="https://obyavlenia.at.ua/board/rabota_i_biznes/1">Работа и бизнес</a></div>
     
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

#line_block { 
 width:23%; 
 height:auto; 
 background:#f1f1f1; 
 float:left; 
 margin: 0 15px 15px 0; 
 text-align:center;
 padding: 10px;
 }

.circle {
 background:#000;
 width: 100px; /* задаете свои размеры */
 height: 100px;
 border-radius: 50%;
 /* не забываем о кроссбраузерности */
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 -khtml-border-radius: 50%;
 margin: auto;
}

Comments

[Rustam Bainazarov]

Border-radius уже несколько лет можно без префиксов.

Answer 1

[Vaultboy84]

Не надо так делать с айдишниками. Айди это уникальное имя, не должно быть более одного айдишника с одним и тем же именем. Айдишники существуют для обращения к ним джаваскрипта, стили лучше вешать на классы. Вместо float: left используйте флексбоксы, выравнивание по вертикальной оси, при верстке флексбоксами это свойство align-items. Не пишите префиксы вручную, используйте пост сиэсэс в сборщиках, таких как gulp, webpack, parsel. Не пишите background, если задаете лишь цвет, так как это целый набор свойств, если задаете только цвет, так и пишите - background-color.