繁体   English   中英

如何在文本旁边放置一个图标并居中 header

[英]How to place an icon next to text and centering a header

我正在尝试将图标放置在图像中的文本左侧。 现在出于某种原因,它位于文本之上。 该图标位于带有文本的选项卡内,我希望图标针对每个选项卡进行更改。 即使我改变边距,它们也不会移动。

Senconly,我在 header 中有一个图像和文本,它在谷歌浏览器中看起来不错,但是当我更改浏览器时,它们会堆积到左侧。 它们目前通过调整边距放置在中心,但也许 flex 显示或网格会使它们在每个浏览器中看起来都居中并且更干净? 我可以这样做吗?

谢谢


<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"; }

当前页面

模型预期结果

修改边距,添加 display.grid,display-flex

是的,flex 可以。 我已将 flex 添加到 header 和所有选项卡。

 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>

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM