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

正如您在下面的图像中看到的，所有项目之间的间距不同，并且看起来很糟糕。这是我目前有：在两列布局中垂直对齐图标和文本

这里是尝试吨不同的招数后的代码（这是一个烂摊子）： http://pastebin.com/D8ekkj6S

我会非常感激，如果有人能告诉我如何正确正确做到这一点。 PS：如果可能的话，我很想知道如何垂直对齐图标，并且它的中间点是相应的文本。

2013-07-17 user2592177

这是不使用任何内嵌样式这样的事情是个好主意。 – dezman

像这样的东西应该为你工作：

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

与你的身高替换的50像素的所有实例。

来源

2013-07-17 16:09:08 dezman

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

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

p { 
    line-height: 45px; 
}

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

来源

2013-07-17 16:07:38 joshuadelange

您还可以设置一个更大的行高和设置图标，与文本的填充背景，以保持它拿走图标，或者有一个图标div和一个文本div，并使用边距将它们彼此左右浮动以正确对齐它们。

来源

2013-07-17 16:09:01

到p

检查给予更多的宽度这一点fiddle demo

来源

2013-07-17 16:13:04 Sachin

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

回答

相关问题