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

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 >
        <img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
        <h1 >Daniela Sucunza</h1>
        <p >Licenciada en Administración</p>
        <p >Programadora Front End</p>
    </div>

    </main>

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

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




<div id="demo">
    
<div id="Acerca"  style=display:block>
    <i ></i>
  <p><img  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  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  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  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"  style=display:none>
  <p><h3>Asistente de Recursos Humanos</h3>
         Noviembre, 2015- Octubre, 2020<br>
         <img  src="iconos/double.arrow.png" alt="arrow">Creación de un registro de cumplimiento para uso de la gerencia cada mes.<br>
         <img  src="iconos/double.arrow.png" alt="arrow">Asistencia en el mantenimiento de todos los archivos en papel para el departamento de RRHH.<br>
         <img  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  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  src="iconos/double.arrow.png" alt="arrow">Conducta profesional, agradable y trabajadora en el día a día.</p>
</div>
<div id="Educacion"  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"  style=display:none>
  <h3>Habilidades</h3>
  <p><img  src="iconos/double.arrow.png" alt="arrow">Ingles Avanzado<br>
    <img  src="iconos/double.arrow.png" alt="arrow">Portugues Intermedio<br>
    <img  src="iconos/double.arrow.png" alt="arrow">SQL <br>
    <img  src="iconos/double.arrow.png" alt="arrow">Power BI <br>
    <img  src="iconos/double.arrow.png" alt="arrow">Photoshop<br>
    <img  src="iconos/double.arrow.png" alt="arrow">Python</p>
</div>
</div>

   
</body>

<footer>
    <a href="https://www.facebook.com/" target="_blank" ></a>
    <a href="https://www.twitter.com/"target="_blank" ></a>
    <a href="https://www.instagram.com/"target="_blank" ></a>
    <a href="https://www.linkedin.com/"target="_blank" ></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

CodePudding user response：

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 >
    <img ID="foto_perfil" src="iconos/perfil.png" alt="Foto de perfil">
    <div >
      <h1 >Daniela Sucunza</h1>
      <p >Licenciada en Administración</p>
      <p >Programadora Front End</p>
    </div>
  </div>
</header>

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

<div >

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

</div>

<div id="demo">

  <div id="Acerca"  style=display:flex>
    <i ></i>
    <p>
      <img  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  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  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  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"  style=display:none>
    <h3>Asistente de Recursos Humanos</h3>
    Noviembre, 2015- Octubre, 2020<br>
    <img  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  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  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  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  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"  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"  style=display:none>
    <h3>Habilidades</h3>
    <p>
      <img  src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Ingles Avanzado<br>
      <img  src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Portugues Intermedio<br>
      <img  src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">SQL <br>
      <img  src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Power BI <br>
      <img  src="https://w7.pngwing.com/pngs/213/485/png-transparent-arrow-double-right-arrows-icon-thumbnail.png" alt="arrow">Photoshop<br>
      <img  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" ></a>
  <a href="https://www.twitter.com/" target="_blank" ></a>
  <a href="https://www.instagram.com/" target="_blank" ></a>
  <a href="https://www.linkedin.com/" target="_blank" ></a>

</footer>