css 如何将图标与文本对齐？

yvgpqqbh 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(153)

我正尝试复制以下布局。但是，我无法将文本与其对应的图标对齐。

我是这么试的：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Guia de Pesca Santos</title>
  <style>
    p {
      font-size: min(max(5px, 4vw), 30px);
      text-align: center;
    }
    /*img,p { display: inline-block;   }*/
    .contenedor {
      display: flex;
      align-items: center;
      display: inline-block;
    }
    img {
      width: 30px;
    }
  </style>
  <meta name="viewport" content="width=device-width" , initial-scale=1.0, maxime-scale=1.0>
</head>

<body>
  <div class="contenedor">
    <img src="img/icotelefone.png" alt="Telefone">
    <p>+55(13) 9779-0227 -Daniel- </p>
    <img src="img/icoemail.png" alt="Telefone">
    <p> contato@guiadepescasantos.com.br </p>
  </div>
</body>

</html>

我该怎么做才能让它发挥作用？

css

来源：https://stackoverflow.com/questions/75762578/how-to-align-icons-with-text

2条答案

按热度按时间

06odsfpq1#

例如，如果您希望保留平面HTML结构，可以用网格替换flexbox并定义模板化列

.contenedor {
  display: grid;
  grid-template-columns: 30px auto;
  gap: 8px;
  align-items: center;
}

<div class="contenedor">
  <img src="img/icotelefone.png" alt="Telefone">
  <p>+55(13) 9779-0227 -Daniel- </p>
  <img src="img/icoemail.png" alt="Telefone">
  <p> contato@guiadepescasantos.com.br </p>
</div>

赞(0）回复(0）举报 2023-03-20

flvlnr442#

<!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="utf-8" />
 <title>Guia de Pesca Santos</title>
    <style>
    p{  font-size: min(max(5px, 4vw), 30px); 
        text-align: center;} 
    /*img,p { display: inline-block;   }*/
    .contenedor { display: flex ; 
                  align-items: center;  
                  display: inline-block;  
                 }
    img {width: 30px; }
   </style>
  <meta name="viewport" content="width=device-width", 
 initial-scale=1.0, maxime-scale=1.0>

 </head>
 <body>
    <table class="contenedor">
     <tr> 
      <td>  <img src="img/icotelefone.png" alt="Telefone"></td>
     
     <td>   <p>+55(13) 9779-0227 -Daniel-  </p></td>
    
     </tr>
        
         <tr>  
         <td> <img src="img/icoemail.png" alt="Telefone">  </td>
       
        <td><p> contato@guiadepescasantos.com.br </p> </td>
        
         </tr>
    </table>

    </body>
    </html>

要对齐字段数据给予请使用class或id并使用text-align属性来指定固定的宽度。然后，您就可以完成任务了。

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何将图标与文本对齐？

2条答案

相关问题

热门标签

最新问答