Resultados 1 al 2 de 2

Tema: Como centrar cabecera

  1. #1
    Recien llegado
    Fecha de ingreso
    27 jun, 19
    Mensajes
    1
    Poder de reputación
    0

    Predeterminado Como centrar cabecera

    Hola a todos compañero.

    Quiero preguntarles como puedo centrar el logo a cabecera de mi web: 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.

  2. #2
    Recien llegado
    Fecha de ingreso
    01 abr, 19
    Ubicación
    Las vegas
    Mensajes
    8
    Poder de reputación
    0

    Predeterminado

    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 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>

¿Te ha sido útil este articulo? Compártelo!

¿Te ha sido útil este articulo? Compártelo!

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •