Вертикально выровнять значки и текст в макете с двумя колонками

Question

Как вы можете видеть на изображении ниже, все элементы имеют разный интервал между ними и просто выглядят ужасно. Это то, что я в настоящее время:

Вот код (это беспорядок) после попытки тонн различных трюков: http://pastebin.com/D8ekkj6S

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

PS: Если возможно, мне бы хотелось знать, как вертикально выровнять значок и соответствующий текст по средней точке.

Answer 1

Что-то, как это должно работать для вас:

HTML:

<div class="iconing"> 
    <i class="icon-someIcon"></i> 
    <p>Your text</p> 
</div> 

CSS:

.iconing i, .iconing p { 
    display: inline-block; 
    vertical-align: middle; 
} 
[class^="icon-"], 
[class*=" icon-"] { 
    width: 50px; 
    height: 50px; 
    line-height: 50px; 
} 

Заменить все экземпляры 50px с высоты.

Answer 2

Прежде всего, не используйте встроенный CSS. Попробуйте использовать этот CSS вместо:

img { 
    float: left; 
    clear: both; 
    margin-right: 10px; 
} 

p { 
    line-height: 45px; 
} 

Для всего примера: http://jsfiddle.net/VMfYa/

Answer 3

Вы также можете установить большую высоту строки и установить иконку в качестве фона с прокладкой на текст, чтобы держать его подальше от значок или иметь div div и текстовый div, и поплавать ими, оставаясь рядом друг с другом, используя margin's, чтобы правильно их выровнять.

Answer 4

дают больше ширины p

проверить это fiddle demo