Center a div / with image / in CSS

Navigation
0

I have two divs : image_cancelling and image_loading.

I want the canceling image to be in the middle of the screen , centered both vertically and horizontally, and that image_loading is below image_cancelling , also centered horizontally, with a separation of 5 line breaks compared to the first div .

Why are not the elements centered? 

* {
	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>
    
asked by omaza1990 09.01.2018 в 13:46
source

3 answers

2

You have only given the top and left position to the canceling_photo and not the uploading_expression p> 

* {
	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>
    
answered by 09.01.2018 / 13:50
source
2

If they focus. For the first div you want the same thing for the other so I'll modify it in the 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>
    
answered by 09.01.2018 в 13:52
0

the elements will not be centered because you use " position: absolute ", so you are marking the position. 

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

More or less something like that ... I hope it helps you ...

    
answered by 09.01.2018 в 14:10
Sql Server Pivot Dinamica effect hover in image