PDA

Ver la versión completa : Como centrar cabecera



finch
27/06/2019, 22:08
Hola a todos compañero.

Quiero preguntarles como puedo centrar el logo a cabecera de mi web: activosaludable.com (https://activosaludable.com/) ya que como se puede apreciar el menú queda con un espacio amplio en la parte derecha.

Si alguien me hecha un cable va a irme de perlas para mejorar el sitio en imagen.

SusanaP
03/09/2019, 14:39
Lo que puedes hacer es aplicarle a tu navbar las propiedades display: flex; justify-content: center; align-items: center; para centrar todo el contenido. Sí quieres centrar verticalmente no te sirve vertical-align ya que solo se aplica a los elementos inline y table-cell, aquí la documentación (en inglés). Y finalmente para la flecha podemos usar position: absolute y asignarle una posicion al número de pixeles que tu desees desde su izquierda¨, puedes descargar videos de instagram online (https://es.savefrom.net/download-from-instagram) si despues de esto no me comprendes la idea, en mi instagram tengo mas material

El código quedaría de esta forma:

.formHeader {
/* La magia de FLEX */
display: flex;
justify-content: center;
align-items: center;

/* Alto de la barra, en tu caso sería 50px */
height: 60px;

/* Color para el demo */
background-color: rgb(83, 33, 168);
}

.navArrow2 {
position: absolute;
color: white;
left: 25px;
}

.tituloTab {
color: white;
}
<navbar class="formHeader" color="talkColor">
<i class="navArrow2" name="md-arrow-round-back">&larr;</i>
<h1 class="tituloTab">Formulario de afinidad</h1>
</navbar>