如何在文本旁边放置一个图标并居中 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
1 个解决方案
解决方案1
0 已采纳 2023-01-30 15:58:24
是的，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>
如何在适合句子长度的文本旁边放置一个图标？
[英]How can I place an icon next to a text that fits the length of the sentence?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.