1

Estoy intentando alinear horizontalmente cajitas (div), pero una de ellas tiene un texto en su interior, y se me desplaza hacia abajo. El código es el que sigue:

div {
	border: 1px solid black;
	width: 200px;
	height: 160px;
	margin: 20px;
	display: inline-block;
}
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Sombras</title>
	<link rel="stylesheet" href="css/modernizr-custom.js">
	<link rel="stylesheet" type="text/css" href="normalize.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="caja1"></div>
	<div id="caja2"></div>
	<div id="caja3"></div>
	<div id="caja4"><p>Texto de prueba</p></div>
</body>
</html>

¿Por qué la caja del texto se desplaza? ¿Es posible solucionarlo?.

He probado a establecer un position: absolute a la caja del texto, y se soluciona el problema cuando lo veo en el navegador en ventana grande, pero en ventana pequeña (móvil), la caja se va a la izquierda.

3 respuestas 3

2

El problema se debe básicamente al vertical-align que los elementos inline tienen, el cual origina que la línea base del componente sea alineado con la línea base de la caja, originando un margen "invisible" que causa que la caja se salga de flujo. Ésta propiedad es bastante confusa para entender, te recomiendo le eches un vistazo a ésta info para entender mejor sus valores. Dándole un vertical-align como top, middle o bottom solucionas éste inconveniente.

div {
  border: 1px solid black;
  width: 200px;
  height: 160px;
  margin: 20px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
<div id="caja1"></div>
<div id="caja2"></div>
<div id="caja3"></div>
<div id="caja4">
  <p>Texto de prueba</p>
</div>

1
  • 1
    + 1 - estaba escribiendo casi la misma respuesta el 31 ene. 2017 a las 19:40
1

Para solucionar puedes usar float: left;

#caja1,#caja2,#caja3,#caja4{
border: 1px solid black;
	width: 200px;
	height: 160px;
	margin: 20px;
  float: left;
  }
	<div id="caja1"></div>
	<div id="caja2"></div>
	<div id="caja3"></div>
	<div id="caja4"><p>Texto de prueba</p></div>

respondiendo:

¿Por qué la caja del texto se desplaza?

inline-block se aplica a un contenedor, en este caso no existe algun contendor que contenga todos los divs

2
  • 1
    ¿Y la razón del por qué la caja se sale de flujo?
    – gugadev
    el 31 ene. 2017 a las 19:18
  • 1
    @guzgarcia no me di cuenta, ya edite mi respuesta, gracias el 31 ene. 2017 a las 19:29
1

Viendo que ya han respondido la pregunta y solucionado el conflicto, aporto una alternativa mas al caso, utilizando Flex. Que dependiendo de lo que estes intentando hacer con las cajitas puede darte mayor flexibilidad (valga la redundancia) en determinadas ocasiones.

.box {
    display: flex;
    flex-wrap: wrap;
}

.box > div {
    border: 1px solid black;
    width: 200px;
    height: 160px;
    margin: 20px;
}
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div><p>Texto de prueba</p></div>
</div>

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.