0

Tengo dos divs: imagen_cancelando e imagen_cargando.

Deseo que imagen_cancelando esté en mitad de la pantalla, centrado tanto vertical como horizontalmente, y que imagen_cargando esté debajo de imagen_cancelando, también centrado horizontalmente, con una separación de 5 saltos de línea respecto al primer div.

¿Por qué no se centran los elementos?

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	display: flex;
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: 100%;
}

#imagen_cancelando{
	position: absolute;
    top: 50%;
    left: 50%;
}

#imagen_cancelando + #imagen_cargando{
	margin-top: 5em;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Cancelando pago</title>
		<link rel="stylesheet" href="css/cancelando.css">
	</head>
	
	<body background="imagenes/fondo_campo4.jpg">
		<div id="imagen_cancelando">
			<img src="imagenes/cancelado.png" alt="cancelando"/>
		</div>
		
		<div id="imagen_cargando">
			<center><img src="imagenes/cargando.gif" alt="cargando" height="20px" width="20px"/></center>
		</div>
	</body>
</html>

1
  • Intenta meterle un margin:auto a ver si así te funciona. Commented el 9 ene. 2018 a las 12:51

3 respuestas 3

2

Solo le has dado la posición top y left a la imagen_cancelando y no a la imagen_cargando

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	display: flex;
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: 100%;
}

#imagen_cancelando,#imagen_cargando{
	position: absolute;
    top: 50%;
    left: 50%;
}

#imagen_cancelando + #imagen_cargando{
	margin-top: 5em;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Cancelando pago</title>
		<link rel="stylesheet" href="css/cancelando.css">
	</head>
	
	<body background="imagenes/fondo_campo4.jpg">
		<div id="imagen_cancelando">
			<img src="imagenes/cancelado.png" alt="cancelando"/>
		</div>
		
		<div id="imagen_cargando">
			<center><img src="imagenes/cargando.gif" alt="cargando" height="20px" width="20px"/></center>
		</div>
	</body>
</html>

1
  • Cierto. El problema que tengo que al ser la imagen tan grande en "cancelando" pues se desvía más a la derecha y hacia abajo desde el punto central de la pantalla
    – omaza1990
    Commented el 9 ene. 2018 a las 12:57
2

Si que se centran. Para el primer div quieres lo mismo que para el otro por lo que te lo modifico en el css.

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	display: flex;
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: 100%;
}

#imagen_cancelando{
	position: absolute;
    top: 50%;
    left: 50%;
}

#imagen_cargando{
	margin-top: 5em;
  	position: absolute;
    top: 50%;
    left: 50%;
}
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Cancelando pago</title>
		<link rel="stylesheet" href="css/cancelando.css">
	</head>
	
	<body background="imagenes/fondo_campo4.jpg">
		<div id="imagen_cancelando">
			<img src="imagenes/cancelado.png" alt="cancelando"/>
		</div>
		
		<div id="imagen_cargando">
			<center><img src="imagenes/cargando.gif" alt="cargando" height="20px" width="20px"/></center>
		</div>
	</body>
</html>

1
  • El problema que tengo que al ser la imagen tan grande en "cancelando" pues se desvía más a la derecha y hacia abajo desde el punto central de la pantalla.
    – omaza1990
    Commented el 9 ene. 2018 a las 12:55
0

los elementos no se van a centrar porque usas "position: absolute", osea que estas marcando la posición.

* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	box-sizing: border-box;
}

body {
	display: flex;
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: 100%;
}

.marginAuto {
margin: 0 auto;
width: 800px;
}

.alin {text-align:center !important; margin-top: 5em;}



#imagen_cancelando{
	margin-top: 5em;
}
<div class="marginAuto">
<div class="alin">

		
		<div id="imagen_cargando">
			<center><img src="http://lorempixel.com/400/200/" alt="cargando" height="20px" width="20px"/></center>
		</div>
		
		<div id="imagen_cancelando">
			<img src="http://lorempixel.com/400/200/" alt="cancelando"/>
		</div>
		</div>
				</div>

Mas o menos algo asi... espero te ayude...

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.