CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bwizard
Bwizard

Reputation: 1023

Line up label with fa icon in my navbar with css

I may be being a bit of a perfectionist but I want my text to line up with the centre of the icon...

compass and town label

I would like to move the compass down a few pixels but using padding and margin just changes the size of the menubar they reside in. Also position relative and bottom moves both.

My code is

<p class="nav navbar-nav navbar-left" id="townlabel">
<i class="fa fa-compass fa-2x" id="compassicon"></i>Glastonbury
</p>

Css

#townlabel {
display: inline-block;
}
#compassicon {
display: inline-block;
margin: 5px;
}

Upvotes: 0

Views: 83

Answers (2)

Scoots
Scoots

Reputation: 3102

Try:

#compassicon {
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

If that doesn't work, then this will, although it's the less "correct" way to do it:

#compassicon {
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
}

You may need to adjust the top value to get it exactly how you want it.

Upvotes: 0

justin
justin

Reputation: 439

You can use vertical-align: middle to fix this.

#townlabel * {
  display: inline-block;
  vertical-align: middle;
}

https://jsfiddle.net/tudrLv03/

Upvotes: 2

Related Questions