CSS图标垂直对齐

Question

我正在尝试使用最小的css元素在css中实现以下对齐：

中：

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

底

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

右中：

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

右下：

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

中间非常容易：

假设文本line-height = 10px，icon height = 30px

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

问题是：如何进行底部对齐？

Answer 1

从父元素垂直对齐元素的唯一方法是将其设置为显示为包含display:table-cell;和vertical-align:的表格单元格。如果这是不可接受的，则必须从子元素和相对位置进行。

http://jsfiddle.net/VdvmJ

Answer 2

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

Check this jsfiddle example

为了正确对齐该部分，我也设置了text-align:right;。

希望你这么做。