htmlcssflexboxfrontendflexboxgrid

How to place an icon next to text and centering a header

I am trying to get an icon to be placed to the left of the text as in the image. Right now for some reason it is on top of the text. The icon are inside tabs with text and I want the icons to change for each tab. Even if I change the margins, they do not move.

Senconly, I have an image and text in the header and it looks fine in google chrome but when I change browsers they pile to the left. They are currently placed in the center by adjusting the margins but maybe a flex display or grid will make them look centered in every browser and be cleaner? could I do this?

Thanks


<header>
    
    <div class="container_header">
        <img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
        <h1 class="Nombre">Daniela Sucunza</h1>
        <p class="titulo">Licenciada en Administración</p>
        <p class="titulo">Programadora Front End</p>
    </div>

    </main>

   
  </header>
<body>
    
    
 <script src="function.js"></script>
    
  <div class="tab">

  <button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
  <button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
  <button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
 <button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>
  </div>




<div id="demo">
    
<div id="Acerca" class="tabcontent" style=display:block>
    <i class="fa-regular fa-user"></i>
  <p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que pueda utilizar mejor mis habilidades y mi pasión.<br>

    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente de trabajo positivo para todos los empleados.<br>

    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>

    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.</p></p>
</div>

<div id="Experiencia" class="tabcontent" style=display:none>
  <p><h3>Asistente de Recursos Humanos</h3>
         Noviembre, 2015- Octubre, 2020<br>
         <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
         <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
         <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme al protocolo de RRHH.<br>

        <h3>Asistente de Recepción<br></h3>
        Julio 2013- Junio 2015<br>
        <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados con los beneficios para los empleados.<br>
        <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.</p>
</div>
<div id="Educacion" class="tabcontent" style=display:none>
    <p> <h3>Licenciatura en Recusos Humanos</h3>
        Febrero 2009 - Octubre, 2013<br>
        Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>
        
        <h3>Master en Ciencia Datos</h3>
        Febrero 2015- Octubre, 2017<br>
        Universidad Nacional
        
        </p> 
  </div>

<div id="Habilidades" class="tabcontent" style=display:none>
  <h3>Habilidades</h3>
  <p><img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Ingles Avanzado<br>
    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Portugues Intermedio<br>
    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">SQL <br>
    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Power BI <br>
    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Photoshop<br>
    <img class="bloque__icono" src="iconos/double.arrow.png" alt="arrow">Python</p>
</div>
</div>

   
</body>

<footer>
    <a href="https://www.facebook.com/" target="_blank" class="fa-brands fa-facebook"></a>
    <a href="https://www.twitter.com/"target="_blank" class="fa-brands fa-twitter"></a>
    <a href="https://www.instagram.com/"target="_blank" class="fa-brands fa-instagram"></a>
    <a href="https://www.linkedin.com/"target="_blank" class="fa-brands fa-linkedin"></a>

</footer>
</html>


:root{
  --primario: #E8F3D6;
  --Oscuro: #A0E4CB;
  --blanco: #fff;
  --Negro: #000;
  --FuentePrincipal: 'Jost', sans-serif;
  --FuenteTitulo: 'DM Serif Display', serif;
  
}
  
   /*GENERALES*/
html {
  box-sizing: border-box;
}


body{
    background-color: white;
    color: black;
    margin: auto;
}


 /* HEADER*/

 #foto_perfil{
  border-radius: 100px;
  float: left;
  width:170px;
  height:170px;
  margin-left: 470px;
  margin-right: 70px;
  margin-top: 15px;
  opacity: 1.0;
 }
 
 #foto_perfil:hover {
  opacity: 0.7;
}

.container_header {
  top: 0%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: left;
  width: 100%;  
  height: 200px; 
  background: var(--primario);

   }


.Nombre{
  font-family: var(--FuenteTitulo);
  font-weight:200;
  margin-right: 1rem;
  color: black;
  font-size: 35px;
  padding-top: 25px;
}

.titulo{
  font-family: var(--FuentePrincipal);
  margin-right: 1rem;
  font-size: 20px;
  font-weight: bold;
  font-style: italic;

}

#demo {
  font-family: var(--FuentePrincipal);
    line-height: 35px;
    margin-top: 1rem;
    font-size: large;
    text-align: justify;
    margin-left: 25rem;
    margin-right: 10rem;
    white-space: wrap;
     }

 /* button*/
 .navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

 .tab button {
  text-align: center;
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;  
  float: center;
  text-decoration: none;
  width: 22%;
  margin-top: 1rem;
  margin-left: 2rem;
  filter: drop-shadow(0px 4px 4p
  x rgba(0, 0, 0, 0.15));
  border-radius: 8px;;
  background-color: white; 
  color: black; 
  border: 2px solid var(--primario);
}


.tab button:hover {
  background-color: var(--Oscuro);
  color: black;
  border: 2px solid var(--Oscuro)
}


.tab button.active {
  background-color: #A0E4CB;
}


.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

 /* ICONOS*/
 img {
  width: 15px;
  height:15px;
}


/*TABS*/
h3{
  font-weight: bolder;
  font-style: italic;
}

/* FOOTER*/
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
text-align: center;
background-color: var(--primario);

  /** margin-top: 2rem;**/
}

.fa-brands {
  color: var(--Negro);
  padding: 20px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  padding: 16px 32px;
  margin: 15px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-regular{
  padding: 20px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: right;
  text-decoration: none;
  padding: 16px 32px;
  margin-right: 0% ;


}


function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }

current page

model- expected outcome

modifying margins, adding display.grid, display-flex

Solution

  • Yes flex will do. I've added flex to the header and all of the tabs.

    function openCity(event, city) {
  const tabs = document.querySelectorAll(".tabcontent")
  tabs.forEach(tab => tab.style['display'] = 'none')
  document.getElementById(city).style['display'] = 'flex';
}
    :root {
  --primario: #E8F3D6;
  --Oscuro: #A0E4CB;
  --blanco: #fff;
  --Negro: #000;
  --FuentePrincipal: 'Jost', sans-serif;
  --FuenteTitulo: 'DM Serif Display', serif;
}


/*GENERALES*/

html {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: black;
  margin: auto;
}


/* HEADER*/

#foto_perfil {
  border-radius: 100px;
  width: 170px;
  height: 170px;
  margin-left: 470px;
  margin-right: 70px;
  margin-top: 15px;
  opacity: 1.0;
}

#foto_perfil:hover {
  opacity: 0.7;
}

.container_header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  width: 100%;
  height: 200px;
  background: var(--primario);
}

.Nombre {
  font-family: var(--FuenteTitulo);
  font-weight: 200;
  margin-right: 1rem;
  color: black;
  font-size: 35px;
  padding-top: 25px;
}

.titulo {
  font-family: var(--FuentePrincipal);
  margin-right: 1rem;
  font-size: 20px;
  font-weight: bold;
  font-style: italic;
}

#demo {
  font-family: var(--FuentePrincipal);
  line-height: 35px;
  margin-top: 1rem;
  font-size: large;
  text-align: justify;
  margin-left: 25rem;
  margin-right: 10rem;
  white-space: wrap;
}


/* button*/

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.tab button {
  text-align: center;
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  text-decoration: none;
  width: 22%;
  margin-top: 1rem;
  margin-left: 2rem;
  filter: drop-shadow(0px 4px 4p x rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  background-color: white;
  color: black;
  border: 2px solid var(--primario);
}

.tab button:hover {
  background-color: var(--Oscuro);
  color: black;
  border: 2px solid var(--Oscuro)
}

.tab button.active {
  background-color: #A0E4CB;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ICONOS*/

img {
  width: 15px;
  height: 15px;
}


/*TABS*/

h3 {
  font-weight: bolder;
  font-style: italic;
}

#demo>* {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* FOOTER*/

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: var(--primario);
  /** margin-top: 2rem;**/
}

.fa-brands {
  color: var(--Negro);
  padding: 20px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  padding: 16px 32px;
  margin: 15px 2px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-regular {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-align: right;
  text-decoration: none;
  padding: 16px 32px;
  margin-right: 0%;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<header>
  <div class="container_header">
    <img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
    <div class="info">
      <h1 class="Nombre">Daniela Sucunza</h1>
      <p class="titulo">Licenciada en Administración</p>
      <p class="titulo">Programadora Front End</p>
    </div>
  </div>
</header>

<script src="function.js"></script>

<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'Acerca')">Acerca de mi</button>
  <button class="tablinks" onclick="openCity(event, 'Experiencia')">Experiencia</button>
  <button class="tablinks" onclick="openCity(event, 'Educacion')">Educación</button>
  <button class="tablinks" onclick="openCity(event, 'Habilidades')">Habilidades</button>

</div>

<div id="demo">

  <div id="Acerca" class="tabcontent" style=display:flex>
    <i class="fa-regular fa-user"></i>
    <p>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Profesional ambicioso y con formación en recursos humanos, que busca un puesto de principiante en el que
      pueda utilizar mejor mis habilidades y mi pasión.<br>

      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ambicioso y capaz de trabajar independientemente o en equipo. Comprometido a establecer y mantener un ambiente
      de trabajo positivo para todos los empleados.<br>

      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Como esta área complementa mis estudios, estoy ansioso por adquirir más experiencia en este campo. Por
      esta razón, estoy buscando una compañía dispuesta a ofrecerme una ubicación entre sus desarrolladores. A cambio, ofrecería mi todo compromiso y sería una adición agradable y amigable para su equipo.<br>

      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Por lo tanto, actualmente estoy buscando un trabajo o una pasantía como un front-end desarrollador.
    </p>
  </div>

  <div id="Experiencia" class="tabcontent" style=display:none>
    <h3>Asistente de Recursos Humanos</h3>
    Noviembre, 2015- Octubre, 2020<br>
    <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
    <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
    <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la creación de documentación para todos los nuevos empleados, y siguió creando archivos conforme
    al protocolo de RRHH.<br>

    <h3>Asistente de Recepción<br></h3>
    Julio 2013- Junio 2015<br>
    <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Apoyo en la actualización de toda la información de beneficios, a la vez que ampliaba los conocimientos relacionados
    con los beneficios para los empleados.<br>
    <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.
  </div>
  <div id="Educacion" class="tabcontent" style=display:none>
    <h3>Licenciatura en Recusos Humanos</h3>
    Febrero 2009 - Octubre, 2013<br> Graduado magna cum laude. Escritor principal de la revista universitaria El León.<br>

    <h3>Master en Ciencia Datos</h3>
    Febrero 2015- Octubre, 2017<br> Universidad Nacional

  </div>

  <div id="Habilidades" class="tabcontent" style=display:none>
    <h3>Habilidades</h3>
    <p>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ingles Avanzado<br>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Portugues Intermedio<br>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">SQL <br>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Power BI <br>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Photoshop<br>
      <img class="bloque__icono" src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Python
    </p>
  </div>

</div>

<footer>

  <a href="https://www.facebook.com/" target="_blank" class="fa-brands fa-facebook"></a>
  <a href="https://www.twitter.com/" target="_blank" class="fa-brands fa-twitter"></a>
  <a href="https://www.instagram.com/" target="_blank" class="fa-brands fa-instagram"></a>
  <a href="https://www.linkedin.com/" target="_blank" class="fa-brands fa-linkedin"></a>

</footer>