CSS：div 中的图标/跨度可防止文本垂直居中对齐。 如何解决这个问题？

Question

I encountered a strange behavior. Let's say you have a div that contains text and you want the text to be vertically centered. To achieve this you would set the height and line-height of the container to the same value. Everything works splendidly.

But now you decide to add an icon (via an icon font) to the mix. And you want this icon to be much larger than the text. Should be no problem. Just add a span or i and set the font-size to whatever you want. Should work.

But it doesn't. The text now suddenly hangs somewhere close to the bottom. Until you change the icon font-size to be the same as the container elements.

What is going on here?

 #container { line-height: 30px; height: 30px; font-size: 15px; border: 1px solid black; } #icon { font-size: 30px; } #icon2 { font-size: 15px; }

 <link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/> <div id="container"> Centered Text </div> <div id="container"> <span id="icon"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div> <div id="container"> <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div>

Answer 1

Below I'm using a flexbox for alignment. This way I don't have to take care of height and/or line-height.

 #container { font-size: 15px; border: 1px solid black; display: flex; align-items: center; /* Vertical alignment */ } #icon { font-size: 60px; } #icon2 { font-size: 30px; }

 <link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet"/> <div id="container"> Centered Text </div> <div id="container"> <span id="icon"><i class="fas fa-american-sign-language-interpreting"></i></span> Centered Text </div> <div id="container"> <span id="icon2"><i class="fas fa-american-sign-language-interpreting"></i></span> Centered Text </div>

Answer 2

All text is aligned to the bottom of the container. As your icon got larger it made the container larger and the rest of the text stayed aligned to the bottom.

What you want to do is set the icon to be vertically aligned to the middle of the container:

#icon {
    vertical-align: middle;
}

 #container { line-height: 30px; height: 30px; font-size: 15px; border: 1px solid black; } #icon { font-size: 30px; vertical-align: middle; } #icon2 { font-size: 15px; }

 <link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet" /> <div id="container"> Centered Text </div> <div id="container"> <span id="icon"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div> <div id="container"> <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div>

The more generic solution:

#container > span {
  vertical-align: middle;
}

 #container { line-height: 30px; height: 30px; font-size: 15px; border: 1px solid black; } #container > span { vertical-align: middle; } #icon { font-size: 30px; } #icon2 { font-size: 15px; }

 <link href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" rel="stylesheet" /> <div id="container"> Centered Text </div> <div id="container"> <span id="icon"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div> <div id="container"> <span id="icon2"><i class="fas fa-arrows-alt-v"></i></span> Centered Text </div>