Tengo mi barra de encabezado:
Íconos para la composición:
El problema es que los elementos no quedan bien centrados de arriba para abajo. Es casi imperceptible, pero no están bien centrados, y necesito centrarlos bien.
Cosas que he intentado:
- Poner márgenes y rellenos al máximo.
- Cambiar los
position
de mis elementos
Aquí les dejo los códigos de funcionamiento:
HTML:
<header>
<div id="navbar_left">
<a href="#"><img src="code/assets/icons/menu.png" class="icon" alt="Menu" id="menuicon" /></a>
<a href="#"><img src="code/assets/logo.png" alt="TextTool" id="logo" onclick="location.reload();" /></a>
</div>
<div id="navbar_right">
</div>
</header>
CSS:
.icon {
width: 1.5em;
padding: 0.8em;
}
/* Logotipo */
#logo {
background-color: #00000000;
width: 5.6em;
padding: 0px;
}
#menuicon {
cursor: pointer;
}
/* Divisiones de barras superiores */
#navbar_left, #navbar_right {
position: absolute;
width: auto;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding: 0;
margin: 0px;
}
/* Barra superior - División derecha */
#navbar_left {
left: 0;
justify-content: flex-start;
}
#navbar_right {
right: 0;
justify-content: flex-end;
}
#navbar_left img, #navbar_right img {
padding-top: 100%;
padding-bottom: 100%;
margin-top: 100%;
margin-bottom: 100%;
}
/* Barra superior */
header {
background-color: #333339;
padding: 1em;
max-width: 100%;
height: 2em;
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
z-index: 99;
border: 0.25px solid #fff;
}
Aclaraciones: Los 2 div
de mi header
son para dividir la barra en 2: uno tira de los elementos a la izquierda y el otro hacia la derecha. No sé si esto tenga que ver con el problema.
Gracias de antemano y espero que me puedas ayudar. ¡Ten un lindo día!