0

necesito ayuda de alguien q pueda decirme como logro centrar una imagen dentro de un div, para poder aprovechar todo el espacio de este, algo tan simple me esta volviendo loco. He encontrado varias respuestas por aqui pero ninguna me acaba de servir. Gracias.

div.logodiv {
  width: 60px;
  height: 60px;
  /*line-height:60px;
	margin:0px auto;*/
  text-align: center;
}

div.logodiv img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
<div class="logodiv">
  <a class="navbar-brand" href="index.html">
    <img src="images/logo.png" alt="logo" />
  </a>
</div>

logo dentro del div

2
  • prueba agregando w-100 y h-100 a la etiqueta a
    – Enzo
    el 20 may. 2020 a las 0:11
  • 1
    Según tu código no lo puedes lograr si usas width: 100%; y height: 100%; en la img. Basta con eliminar esto y no importa cuantos pixeles de ancho agregues a logodiv ya que tienes el img dentro de un ancla <a> y con la propiedad text-align:center; se centrara automáticamente.
    – ZeroCool
    el 20 may. 2020 a las 0:29

3 respuestas 3

1

Para centrar verticalmente hay varias maneras de hacerlo, vertical-align funciona para contenidos en table, por eso debes de agregar la propiedad display con el valor table al componente padre que en este caso es un div, y agrega el valor table-cell a el componente hijo que en este caso no es img sino a ya que es a quien es hijo de div, te dejo un ejemplo con bordes para apreciar mas el resultado:

div.logodiv {
  width: 200px;
  height:200px;
  border:1px solid #000;
  display: table;
}

div.logodiv img {
  width: 100px;
  height: 100px;
  border:1px solid #000;
  }
  
  a{
   display: table-cell;
  vertical-align: middle;
  text-align:center;
  }
<div class="logodiv">
  <a class="navbar-brand" href="index.html">
    <img src="https://articles-images.sftcdn.net/wp-content/uploads/sites/2/2015/04/image-06-100x100.png" alt="logo" />
  </a>
</div>

Edit:Si usas largo y ancho en porcentaje, no utilices el 100% ya que el componente hijo abarcara todo el espacio del componente padre y no se apreciara el centrado

0

La forma en la que solucione tu error fue haciendo que la etiqueta <a> contenga tanto al div, como a la imagen. Y no solo a la imagen como es en tu caso.

Prueba con el codigo que te estoy dejando abajo. En lugar de href="" en la etiqueta <a>, podrias poner tu href="index.html".

Si no es lo que necesitas, intenta especificar un poco mas porfavor asi te puedo ayudar

.container{
  width: 60px;
  height: 60px;
}
.container img{
  width: 100%;
  height: 100%;
}
<a href="">
  <div class="container">
    <img src="https://lorempixel.com/90/90/"/>
  </div>
</a>

2
  • esta me funcionó de 10, gracias a todos por la ayuda. el 21 may. 2020 a las 2:23
  • Por favor, podrias marcar la respuesta como que resolvió tu problema? el 21 may. 2020 a las 2:58
0

Prueba con el siguiente código en el css, justo en el div que contiene al logo:

justify-content:center;

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.