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

Question

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

Your html structure all messed up. Header out of the body. Missing opening/closing tags etc. Clean that first — Smollet777, Jan 30 '23 at 15:04

Smollet777 · Accepted Answer · 2023-01-30T20:22:25.727

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>

hi! thanks for you reply! for some reason if I add the style=display:block so I get the about me section as the landing page the icon moves again if I leave it without the display:block, when I click again, browse through the tabs and go back to the first one, the icon moves to the top. On the header part, it worked perfectly, thanks!! — Daniela Sucunza, Jan 30 '23 at 17:09
Cuz you need to change display to flex(how its by default now) not block — Smollet777, Jan 30 '23 at 18:25
but then how do I make the "acerca de mi" the default tab you see when you open the page? also, when I take out the flex, the icon goes back to the top after you come back from the other tabs — Daniela Sucunza, Jan 30 '23 at 19:01
You did not provide js code so I didn't guess how you hide the tabs. I've edited the answer to include show/hide code. I assume you have smtn like that — Smollet777, Jan 30 '23 at 20:22
Just added the JS code, stackoverflow didn´t allow me to post bc of spam before, sorry — Daniela Sucunza, Jan 30 '23 at 23:57

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

1 Answers1