CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

Vertically align in center a font-awesome icon next to text paragraph

I want to have a font-awesome icon on the left and my text paragraph on the right. The font-awewome icon has to be vertically centered right next to text and all text needs to stay on right side of icon (even when text is longer and may fall underneath icon).

How to accomplish this because I have all the right code I could think of?

Fiddle... Fiddle

HTML:

<div class="modal-body">
<p><i class="fa fa-check-circle"></i> bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

CSS:

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:inline-block;
    text-align:center;
}

.modal-body p {
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
}

Upvotes: 1

Views: 5800

Answers (2)

Zorro
Zorro

Reputation: 1519

Putting Just 

style="padding: 10px"

Work for me!

Upvotes: -1

crazymatt
crazymatt

Reputation: 3286

Try and organize your code like this

HTML

<div class="modal-body">
    <div class="icon"><i class="fa fa-check-circle"></i></div>
    <div class="text">bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>

CSS

.icon {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid pink;
}

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:block;
    text-align:center;
    background-color: red;
    width: 32px;
    height: 32px;
}

.text {
    display: table-cell;
    vertical-align: top;
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
    border: 1px solid orange;
}

I updated your Fiddle with this code if you want to see it in action. I added borders so you could see each of the table cell and a background color so that you could see the Awesome Font icon.

If you dont want your Font Awesome Icon in the middle of the left column then you can set the vertical alignment to top. You can read more about table alignment here.

Upvotes: 5

Related Questions