0

Tengo mi barra de encabezado:

Mi barra de encabezado.

Íconos para la composición:

menu.png

logo.png

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!

5
  • Si buscas precisión milimétrica en tu diseño, lo mínimo es que compartas las imágenes para que podamos ayudarte a ajustarlo. ;)
    – Bettylex
    Commented el 21 sept. 2021 a las 21:10
  • Compartí una imagen con el header que tengo actualmente, y no sé que más sea necesario. Con gusto añado más, pero no se qué… Commented el 22 sept. 2021 a las 2:18
  • Necesitaría que subieras las dos fotos que se usan en la composición: menu.png y logo.png, que es lo que en teoría habría que ajustar.
    – Bettylex
    Commented el 22 sept. 2021 a las 10:08
  • Ah, ok. Los voy a subir Commented el 22 sept. 2021 a las 18:02
  • Ya los subí. Se ven en blanco porque son PNG. Commented el 22 sept. 2021 a las 19:53

1 respuesta 1

1

En realidad, las imágenes están perfectamente centradas, un efecto óptico hace parecer que no. Pero si apuntas a las dos imágenes con F12 abierto, verás que la alineación de las dos imágenes es perfecta, teniendo en cuenta su pequeña diferencia de tamaño.

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

/* 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;
}
<header>
<div id="navbar_left">
    <a href="#"><img src="https://i.sstatic.net/0hBHI.png" class="icon" alt="Menu" id="menuicon" /></a>
    <a href="#"><img src="https://i.sstatic.net/qW3Sw.png" alt="TextTool" id="logo" onclick="location.reload();" /></a>
</div>
<div id="navbar_right">
</div>
</header>

Aun así, te sugiero eliminar esta parte, que no tengo muy claro para qué la usas, pero no es necesaria:

#navbar_left img, #navbar_right img {
    padding-top: 100%;
    padding-bottom: 100%;
    margin-top: 100%;
    margin-bottom: 100%;
}

Por lo demás, es el propio diseño de tu logo el que crea el efecto óptico, pero tu header está perfecto. ;)

1
  • 1
    ¡Muchas gracias! El último trozo de código sirve justamente para centrar las imágenes dentro del header. La verdad me gusta el desbalance óptico, pero tenía la duda si era por el código o por mis imágenes. ¡Ten un lindo día! Commented el 23 sept. 2021 a las 22:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.