Question 43911 in Html Question posted in
Some basic documentation can be found here.

How to align icons with text? – Html

I’m trying to replicate the following layout. However, I failed to align the texts with their corresponding icons.

enter image description here

This is what I tried:

<!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> [email protected] </p>
  </div>
</body>

</html>

What should I do in order to make it work?

Tags:

2

Answers


  1. 0 
    <!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> [email protected] </p> </td>
        
         </tr>
    </table>

    </body>
    </html>

    to align the fileds data give some fixed width to using class or id and use text-align property.then you can accomplish your task.

    Login or Signup to reply.
  2. 0

    If you want to retain a flat HTML structure, you could replace flexbox with grid and define templated columns, for instance

    .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> [email protected] </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search