1

Estoy utilizando Bootstrap para hacer una web y quiero posicionar el logo en el centro del nav y que sobresalga de la barra de navegación, el problema es que el logo no me lo posiciona en en el centro y me lo hecha para derecha

dejo aquí el codigo

.navbarvalues {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.iconnavbar {
    font-size: 20px;
    padding: 10px 0;
}


.logo {
    width: 80px;
    position: absolute;
    top: 0;
}
  <nav class="navbar navbar-expand navbar-light navbarvalues">
    <div class="container">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
   
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-search iconnavbar"></i><span class="sr-only">(current)</span></a>
      </li>
    </ul>
    
    <a class="navbar-brand" href="#"><img alt="Seis" src="img/logo.svg" class="logo"></a>
    
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
      <a class="nav-link" href="#"><i class="far fa-envelope iconnavbar"></i><span class="sr-only">(current)</span></a>
      </li>
    </ul>

    
  </div>
  </div>
  </nav>

2
  • Intenta colocar la propiedad display en ambas clases, navbar-nav y navbar-brand , agrega el valor inline-block para posicionar uno al lado del otro
    – 404
    el 31 dic. 2019 a las 17:47
  • No hay manera. Es el position absolute del logo lo que joroba todo, pero no encuentro otra manera para que el logo sobresalga del navbar imgur.com/JAolsmb
    – RubenG
    el 31 dic. 2019 a las 18:04

2 respuestas 2

0

A la clase de tu logotipo agregale la propiedad "left" y que su valor sea 50% menos la mitad de lo ancho del logotipo (80px / 2 = 40px). Ej

.logo {
    width: 80px;
    position: absolute;
    top: 0;
    left: calc(50% - 40px);
}
4
  • He decidido quitarle el position absolute y el top. Y he cambiado el padding a 0 y ahora el logo se encuentra centrado, pero lo que quiero hacer ahora es que el logotipo sobresalga del navbar por abajo un poco pero no encuentro la manera Así está ahora imgur.com/a/bkEKPxO
    – RubenG
    el 31 dic. 2019 a las 21:23
  • Yo te recomendaria dejarlo asi como lo tenias con (position: absolute) y hacerlo un poco hacia abajo con (top: 15px) y el (left) como te lo comente, cuando se necesita que salga un poco del div que lo contiene (.container) es necesario hacerlo asi, recuerda que la posicion absoluta de tu logotipo sera relativa a su contenedor (.container). el 31 dic. 2019 a las 21:31
  • Vale. Muchísimas gracias por su ayuda! Feliz Año Nuevo!
    – RubenG
    el 31 dic. 2019 a las 21:41
  • Igualmente carnal :) el 31 dic. 2019 a las 22:58
0

Al menos bootstrap 4 tiene soporte para flexbox con lo cual al contenedor padre que tiene a tu logo le pudieras aplicar una clase de este tipo:

<div class="d-flex align-items-center">
  <!--aquí tu tag invocando tu logo-->
</div>

Con lo cual estarías cubriendo las propiedades y valores de flexbox siguientes:

  • justify-content: center;
  • align-items: center;

Referencia

8
  • Lo he intentado, pero el logo continúa en el mismo lugar. No está en el centro
    – RubenG
    el 31 dic. 2019 a las 17:43
  • Entonces de forma manual puedes colocar en una hoja css las 2 propiedades que te menciono para centrar el título @RubenG
    – BetaM
    el 31 dic. 2019 a las 17:44
  • Lo he intentado de esas formas, pero nada. Lo que falla es el position absolute del logo, que también afecta al ml-auto imgur.com/JAolsmb
    – RubenG
    el 31 dic. 2019 a las 18:21
  • Es que ni el position ni el top son necesarios para lo que buscas, prueba quitar dichas propiedades ya que en conjunto sacan al elemento del DOM del flujo normal y lo posicionan según tu voluntad, entonces prueba removerlas y agregar alguna de las opciones que te indico @RubenG
    – BetaM
    el 31 dic. 2019 a las 18:30
  • Pero he puesto el position absolute y el top 0 para que no deje hueco en la parte de arriba y sobresalga de abajo. Si le quito el absolute y el top, sí que me lo centra, pero cuando pongo dichas propiedades para que no me deje hueco arriba y sobresalga del nav, es cuando se altera. ¿hay alguna otra forma de hacerlo? Esta es una idea de lo que deseo imgur.com/a/Rxuun5Y pero el logo en medio
    – RubenG
    el 31 dic. 2019 a las 18:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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