CODEWITHSUNDEEP
htmlcss
TMH
TMH

Reputation: 6246

How can I align the text vertically to the middle of the parent div

I'm having issues with some CSS. I have a list of contact details, with a large-ish icon next to them, and I want to text to be aligned in the middle of the icon, rather than at the bottom.

Here's my current CSS/HTML

HTML

<div class="links">
    <div><i class="fa fa-envelope"></i> <a href="mailto:{$venueInfo.email}">[email protected]</a></div>
    <div><i class="fa fa-phone"></i> 01234 567 890</div>
    <div><i class="fa fa-facebook"></i> <a href="{$venueInfo.facebook}">Facebook</a></div>
    <div><i class="fa fa-twitter"></i> <a href="https://www.twitter.com/@{$venueInfo.twitter}">Twitter</a></div>
</div>

CSS

.links div {
    margin:10px 0px;
}

.links i {
    font-size:25px;
    width:30px;
    text-align:center;
}

.links a {
    color:#000000;
}

I've set up a fiddle of the HTML/CSS, you can see it here

I tried using display:table-cell; and vertical-align:middle, but it through the entire layout off.

EDIT: Updated fiddle to work with FontAwesome icons

Upvotes: 0

Views: 72

Answers (5)

Tajinder
Tajinder

Reputation: 197

Just encapsulate the i tags and a tags with span

<div><span><i></i><a></a></span></div>

This would do good as required.

I think this could work for you test.

encapsulate the text inside the div (apart from i tags) in a span.

  .links div {
    margin:10px 0px;
    height: 30px;
    display: table;
  }
  .links div span{
    display:table-cell;
    vertical-align:top;
    margin-left: 5px;
  }

Upvotes: 0

raj
raj

Reputation: 1

try giving 'display: inline-block' property for the icons and give padding to vertically center it. - answer updated

.links a {
color: #000;
padding: 1px;
display: inline-table;
vertical-align: middle;
height: 30px;
}
.fa-envelope:before {
content: "\f0e0";
display: inline-block;
padding-top: 5px;
}

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28417

The problem lies in the fontawesome inside your i. There is a gap between the font baseline and the i.

You can see that clearly in this example: http://jsfiddle.net/abhitalks/Bjdw2/29/

Without changing much of your code, you could quickly do this:

Demo: http://jsfiddle.net/abhitalks/Bjdw2/31/

.links i {
    ...
    line-height: 25px; /* equal to your font-size */
    vertical-align: middle; /* to align vertically against its sibling */
    padding-top: 4px; /* to offset the gap of font inside `i` */
}

Upvotes: 0

Rishabh Shah
Rishabh Shah

Reputation: 679

Somehow the images are not showing up on fiddle but you may try the below code:

.links div {
    margin:10px 0px;
    height: 30px;
    verticle-align: middle;
}

Have a nice day.

*Update

Just update the following style and keep the rest as it is:

.links i {
    font-size: 25px;
    width: 30px;
    text-align: center;
    float: left;
    padding-right: 5px;
 }

Upvotes: 0

SpiderCode
SpiderCode

Reputation: 10122

Add float:left to your class fa as mentioned below:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
}

JSFiddle

Upvotes: 1

Related Questions