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

Answer 2

给更多的宽度p

看看这个小提琴演示

Answer 3

首先，不要使用内联 CSS。尝试改用这个 CSS：

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

p {
    line-height: 45px;
}

对于整个示例：http: //jsfiddle.net/VMfYa/

Answer 4

您还可以设置更大的行高并将图标设置为背景，并在文本上添加填充以使其远离图标，或者有一个图标 div 和一个文本 div，并使用边距使它们彼此并排浮动正确对齐它们。