对齐文本顶部的图标 HTML

Question

我想在 HTML h4 的顶部对齐一个图标。我做不到，所以我在这里发帖提问。

我想要什么样的开发外观：

ICON
TEXT

实际情况：

ICON
    TEXT

html:

  <div class="w3-container w3-padding-32" id="about">
        <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">À Propos</h3>
        <div class="w3-row-padding w3-grayscale" id="noo">
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-people-carry"></i>
             <h4>Un service de qualité</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-file-code"></i>
             <h4>Nous prenons soin du développement</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-server"></i>
             <h4>Services d'hébergement par hostmyserver</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-puzzle-piece"></i>
             <h4>Des items inédits</h4>
           </div>
        </div>

Css:

#noo i {
  font-size: 48px;
}
#noo h4 {
  text-align: center;
}

输出：

我希望它看起来如何：

Answer 1

由于您使用的是 FontAwesome 的图标，因此也请尝试将它们居中对齐。那么您的 CSS 将如下所示：

#noo i {
  font-size: 48px;
}

#noo h4, #noo i {
  text-align: center;
}

Answer 2

尝试从 #noo h4

中删除 text-align: center;

#noo i {
  font-size: 48px;
}
#noo h4 {
  /*text-align: center;*/
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<div class="w3-container w3-padding-32" id="about">
        <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">À Propos</h3>
        <div class="w3-row-padding w3-grayscale" id="noo">
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-people-carry"></i>
             <h4>Un service de qualité</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-file-code"></i>
             <h4>Nous prenons soin du développement</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-server"></i>
             <h4>Services d'hébergement par hostmyserver</h4>
           </div>
           <div class="w3-col l3 m6 w3-margin-bottom">
             <i class="fas fa-puzzle-piece"></i>
             <h4>Des items inédits</h4>
           </div>
        </div>

Answer 3

试试这个，

#noo {
display:grid;
grid-template-rows: auto auto;
justify-content: center;
align-items:center;
}

or 

#noo {
display:flex;
flex-direction:row;
justify-content: center;
align-items:center;
}

Answer 4

尝试使用这个，它会起作用

#noo div{
    display: flex;
    justify-content: center;
    align-items: center; 
 }

对齐文本顶部的图标 HTML

Align icon on the top of text HTML

html

css

icons

对齐文本顶部的图标 ​​HTML

Align icon on the top of text HTML

html

css

icons

对齐文本顶部的图标 HTML