如何将我的图标放在页面中间并将文本放在图标下方？答案

【问题标题】：How can I center my icons in the middle of the page and place the text under the icons?如何将我的图标放在页面中间并将文本放在图标下方？
【发布时间】：2021-10-01 11:05:08
【问题描述】：

如何将我的图标置于页面中间并将文本置于图标下方？我试了 4 个小时，还是不行；如果是基于Flex box，在DIV中间就好了，

<pre>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


   <style>
.row{
   display: flex; /* مهمة */ 
   justify-content: space-between; 


               .servics{
            height: 100%;
            width: 100%;
            padding-top: 2%;
            text-align: center;
            margin:  10% auto;
            /*       https://www.youtube.com/watch?v=wfaDzSL6ll0        */
         
         }


         .icons{
            display: flex;

         }
         .child{
            width: 150px;
            height: 150px;
            background-color: transparent;
            border: 4px solid #87CEEB;
            border-radius: 100%;
            font-size: 50px;
            text-align: center;

            
            }

         .icon1, .icon2, .icon3, .icon4{
            color: rosybrown;
            line-height: 150px;
         }

   </style>

</head>
<body>

   <section class="servics">
      <h1>Unsere Leistungen</h1>

      <div class="row">
         <div class="icons">


                  
            <div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
            <div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
            <div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
            <div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
          </div>
          
      </div>
   </section>
</body>
</html>
</pre>

【问题讨论】：

标签： html css center

【解决方案1】：

以下代码可能会有所帮助

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

   <style>
         .servics{
            height: 100%;
            width: 100%;
            padding-top: 2%;
            text-align: center;
            margin:  10% auto;
            /*       https://www.youtube.com/watch?v=wfaDzSL6ll0        */
         
         }
          .icons{
             display: flex;
             justify-content: center;
 
          }
          .child{
             width: 150px;
             height: 150px;
             background-color: transparent;
             border: 4px solid #87CEEB;
             border-radius: 100%;
             font-size: 50px;
             text-align: center;
           }
 
          .icon1, .icon2, .icon3, .icon4{
             color: rosybrown;
             line-height: 150px;
          }

   </style>

</head>
<body>

   <section class="servics">
      <h1>Unsere Leistungen</h1>
      <div class="icons">
         <div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
            <div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
            <div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
            <div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
         </div>
      </div>
   </section>
</body>
</html>

【讨论】：

【解决方案2】：

把任何东西放在你可以使用的页面中间>>

position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

并且是另一种将文本放在图标下的方法，

在i标签上使用你的边框样式:)

看这里>>

.ur-icon{
    border: & & &;
    border-radius: &;
}

looc ^^^ 我在图标中使用了边框样式而不是 div（子图标#）

之后你可以加上和高度

对于空格使用填充/边距

玩得开心。 ??

【讨论】：

【解决方案3】：

试试这个：它的 flex 布局方法。在过去，将页面居中居中是一件很困难的事情，现在它已经改变了。删除所有样式代码并替换为以下代码：

/* CSS */
body{
    display: flex;
    justify-content: center;
    background: orange;
    align-items: center;
    height: 100vh;
}
    
.icons *{
    display: inline-block;
}
    
.servics{
    text-align: center;
}

【讨论】：