CODEWITHSUNDEEP
htmlcssicons
user2592177
user2592177

Reputation: 45

Vertically align icons and text in a two column layout

As you can see in thew image below, all items have different spacing between them and simply look awful. This is what I currently have:

Here is the code (it's a mess) after trying tons of different tricks: http://pastebin.com/D8ekkj6S

I'd be really thankful if someone could tell me how to properly do this correctly.

PS: If possible, I'd love to know how to vertically align the icon and it's corresponding text by the middle point.

Upvotes: 2

Views: 2205

Answers (4)

Sachin
Sachin

Reputation: 2148

give more width to p

check this out fiddle demo

Upvotes: 0

dezman
dezman

Reputation: 19358

Something like this should work for you:

HTML:

<div class="iconing">
    <i class="icon-someIcon"></i>
    <p>Your text</p>
</div>

CSS:

.iconing i, .iconing p {
    display: inline-block;
    vertical-align: middle;
}
[class^="icon-"],
[class*=" icon-"] {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

Replace all instances of 50px with your height.

Upvotes: 1

user2589557
user2589557

Reputation:

You could also set a bigger line height and set the icon as a background with a padding on the text to keep it away from the icon, or have an icon div and a text div, and float them both left beside each other using margin's to align them properly.

Upvotes: 0

joshuadelange
joshuadelange

Reputation: 390

First of all, don't use inline CSS. Try using this CSS instead:

img {
    float: left;
    clear: both;
    margin-right: 10px;
}

p {
    line-height: 45px;
}

For the whole example: http://jsfiddle.net/VMfYa/

Upvotes: 0

Related Questions