CODEWITHSUNDEEP
cssfont-awesome
TheLearner
TheLearner

Reputation: 2863

Vertically aligning a Font Awesome icon inside a div along with an H1

Here's an HTML snippet:

<div class="source">
   <h1 class="source-text">dar</h1>
   <span class="sound">
      <i class="fa fa-volume-up pronounce"></i>
   </span>
</div>

And it renders as:

enter image description here

As you can see, the icon is bottom-aligned with the H1 tag. I need it center-aligned, instead. I have tried the following different ideas with my CSS:

Adding negative padding to the span:

.sound {
    padding-left: 1.5em;
    padding-top: -0.5em;
}
.pronounce {
    font-size: 2em !important;
}

Adding negative padding to the icon:

.sound {
    padding-left: 1.5em;
}
.pronounce {
    font-size: 2em !important;
    padding-top: -0.5em;
}

Adding negative margin to the span:

.sound {
    padding-left: 1.5em;
    margin-top: -0.5em;
}
.pronounce {
    font-size: 2em !important;
}

Adding negative margin to the icon:

.sound {
    padding-left: 1.5em;
}
.pronounce {
    font-size: 2em !important;
    margin-top: -0.5em;
}

I even tried vertical-align: middle on the span but the alignment is still unchanged. Any workaround?

Upvotes: 2

Views: 4064

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Try this:

.source > .sound {
    display: flex;
    align-items: center;
}

or

.source  { display: flex; }
.sound   { align-self: center; }

or

.source     { display: flex; }
.sound      { display: flex; align-self: center; }
.pronounce  { align-self: center; }

(without seeing a working demo, it's hard to tell which option, if any, is best)

Upvotes: 4

Mike Donkers
Mike Donkers

Reputation: 3689

You can try using the css line-height property. Link to explanation

What you do is you take the height of the "wrapper" <div> of the <h1> and the <i> and you set the line height to equal to that height.

Sample HTML

<div class="wrapper">
    <h1>Some text</h1><i></i>
</div>

Sample CSS

.wrapper {
    height:200px;
    line-height:200px;
}

Hope this helps!

Upvotes: 1

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17944

you may do it like this:

h1, span{
    display: inline-block;
    vertical-align: middle;
}

Upvotes: 2

Related Questions