将图标和文本垂直对齐为两列布局(Vertically align icons and text in a two column layout)

将图标和文本垂直对齐为两列布局(Vertically align icons and text in a two column layout)

正如您在下面的图片中看到的，所有项目之间的间距都不同，看起来很糟糕。 这就是我目前所拥有的：

在尝试了大量不同的技巧之后，这是代码（这是一团糟）： http ： //pastebin.com/D8ekkj6S

如果有人能告诉我如何正确地做到这一点，我真的很感激。

PS：如果可能的话，我很想知道如何垂直对齐图标和中间点的相应文本。

As you can see in thew image below, all items have different spacing between them and simply look awful. This is what I currently have:

Here is the code (it's a mess) after trying tons of different tricks: http://pastebin.com/D8ekkj6S

I'd be really thankful if someone could tell me how to properly do this correctly.

PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.

最满意答案

这样的事情对你有用：

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的实例。

Something like this should work for you:

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; }

Replace all instances of 50px with your height.