CSS图标垂直对齐

时间:2012-08-01 16:17:41

标签: css

我正在尝试使用最小的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;
}

问题是:如何进行底部对齐?

2 个答案:

答案 0 :(得分:4)

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

http://jsfiddle.net/VdvmJ

答案 1 :(得分:1)

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

Check this jsfiddle example

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

希望你这么做。