Question

I am trying to achieve the following alignments in css with minimal css elements:

Middle:

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

Bottom:

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

Right Middle:

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

Right Bottom:

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

Middle is REALLY easy:

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

The question is: How do I do the bottom alignment?

Answer 1

The only way you can align elements vertically from the parent element is by setting it to display as a table-cell with display:table-cell; and vertical-align:. If that isn’t acceptable, you must do it from child elements and relative positioning.

http://jsfiddle.net/VdvmJ