css - CSS 图标垂直对齐

Question

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

中间：

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

底部：

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

右中：

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

右下角：

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

中间真的很容易：

假设文本行高 = 10px，图标高度 = 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

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

检查这个 jsfiddle 示例

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

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