将图标和文本垂直对齐为两列布局

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，并将它们两个都悬浮在一起使用边距来正确对齐它们。

Answer 4

为p

提供更多宽度

查看fiddle demo