html - 在两列布局中垂直对齐图标和文本

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 的所有实例替换为您的高度。