Попытка выравнивания изображений по центру

Question

У меня есть 4 значка, которые выравниваются по горизонтали. Однако я хотел бы, чтобы они выравнивались друг с другом по центральной линии, если это имеет смысл. На данный момент они не совпадают. Например, верхняя часть одного изображения может совпадать с серединой другого. Значки имеют разные размеры, но я не против, если выровняйте по центру. Вот мой HTML

<section class="feature"> 
    <div class="grid_4"> 
     <img src="images/image-1.png"> 
     <p> 
      <a href="#">Email</a> 
      iamapdige@<br>hotmail.com    
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-2.png"> 
     <p> 
      <a href="#">Mobile</a><br> 
      Call or text 085PIDGEON    
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-3.png"> 
     <p> 
      <a href="#">Facebook</a><br> 
      Check us out on Facebook!  
     </p> 
    </div> 

    <div class="grid_4"> 
     <img src="images/image-4.png"> 
     <p> 
      <a href="#">Twitter</a><br> 
      Tweet me! @pidgeon   
     </p> 
    </div> 
</section> 

И соответствующий CSS

.feature { 
    margin-top: 70px; 
    font-size: 15px; 
    font-family: sans-serif; 
} 

.feature img { 
    float: left; 
    margin-right: 6px;  
} 

Спасибо за любую помощь. Если неясно, что я имею в виду, тогда я могу загрузить изображение шаблона PS для объяснения.

Answer 1

Если значки различной ширины, но вы хотите, чтобы все они были центрированы друг на друга, попробуйте помещать изображения в промежутки. Задайте ширину пролетов шириной самого широкого значка и используйте для них text-align: center.

Answer 2

Проверить это JSFIDDLE

В принципе, вам нужно настроить поля внутри и сделать граничащий контейнер, который я добавляемые равна суммы ширины и окраин grid_4s.

так:

.feature{ 
    width:600px; 
    margin:auto; 
} 
.grid_4{ 
    width:100px; 
    margin:25px; 
} 

Что маржа автоматически делает это автоматически корректирует свои поля в пределах ширины секции 100%. поля автоматически позиционируют себя в центре в зависимости от ширины функции контейнера. поэтому, если вы хотите, чтобы ваши изображения были центральными и выровнены по горизонтали, тогда они должны идеально равняться ширине элемента div, поэтому добавьте ширину и поля (по горизонтали) и получите ответ как ширину функции, если вы последуете за ней. .

надеюсь, что это поможет!