CODEWITHSUNDEEP
css
Dmitriy Likhten
Dmitriy Likhten

Reputation: 5216

CSS Icon vertical aligning

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?

Upvotes: 2

Views: 20311

Answers (2)

RyanJMcGowan
RyanJMcGowan

Reputation: 1515

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

Upvotes: 5

Libin
Libin

Reputation: 2462

Its not a big deal I think. First set the background image position to top left and then increase the line height according to your image height.

Check this jsfiddle example

For right aligning the section, I set text-align:right; also.

Hope you are trying to do this.

Upvotes: 1

Related Questions