CSS图标垂直对齐

我想用最少的CSS元素，以实现在CSS以下路线：CSS图标垂直对齐

中东：

============================================================== 
= [icon]              = 
= [ ] Text            = 
= [ ]              = 
==============================================================

底：

============================================================== 
= [icon]              = 
= [ ]              = 
= [ ] Text            = 
==============================================================

右中：

============================================================== 
=              [ ] = 
= Text            [ ] = 
=              [ ] = 
==============================================================

Right Bott OM：

============================================================== 
=              [ ] = 
=              [ ] = 
= Text            [ ] = 
==============================================================

中是很容易的：

假设文本的line-height = 10px的，图标高度= 30像素

<div class="container"> 
    Text 
</div> 

<div class="container right"> 
    Text 
</div> 

.container { 
    line-height: 30px; 
    background: url(...) no-repeat center left 
    padding-left: 38px; 
} 
.container.right { 
    line-height: 30px; 
    background: url(...) no-repeat center right 
    padding-right: 38px; 
}

的问题是：我该怎么办底部对齐？

来源

2012-08-01 Dmitriy Likhten

'background：url（...）no-repeat right right'？ – 2012-08-01 17:41:30

您可以从父元素垂直对齐元素的唯一方法是将其设置为显示为display:table-cell;和vertical-align:的表格单元格。如果这是不可接受的，你必须从子元素和相对定位来完成。

http://jsfiddle.net/VdvmJ

来源

2012-08-01 20:14:10 RyanJMcGowan

会检查出来，非常感谢。 – 2012-08-01 21:01:35

史诗般的家伙，我爱你！要说清楚。将height设置为图像的大小，设置display：table-cell;并在同一个元素上设置vertical-align作为你想要的方向。 – 2012-08-03 13:20:19

是的。如果你想在CSS中分开做每件事，你可以将它作为一种开关来使用，所以你不必编码每种可能的布局组合。 – RyanJMcGowan 2012-08-03 17:22:37

我觉得这不是什么大不了的事。首先将背景图像位置设置在左上方，然后根据图像高度增加线条高度。

Check this jsfiddle example

对于右对齐的部分，我设置text-align:right;也。

希望你正在努力做到这一点。

来源

2012-08-01 16:50:12 Libin

我无法使用该解决方案，原因是我不知道文本的高度是多少。在这个例子中我认为它是10px，但是这种风格需要应用于许多元素，每个元素都有不同的字体大小。此外，它有点不对，http://jsfiddle.net/ySYTb/2/看到边界。它推动实际的父母比预期的更大。 – 2012-08-01 18:09:35

CSS图标垂直对齐

回答

相关问题