Autor Tema: HTML y CSS centrar una imagen verticalmente y horizontalmente CU01031D (Leído 2482 veces)

Lorenzo31 · « **en:** 17 de Febrero 2016, 13:09 »

Buenos días, dejo mi respuesta al ejercicio y una pregunta.

<!DOCTYPE html>
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<link rel="stylesheet" type="text/css" href="estilos131D.css"/>
	</head>
	<body>
		 <div id="primera"></div>
		 <div id="segunda"></div>
		 <div id="tercera"></div>
		 <div id="cuarta"></div>
	</body>
</html>

estilos131D.css

Código: [Seleccionar]

/*Estilos CSS Ejercicio131D.css*/
body {width:90%; margin:auto; border:solid;}
div {width:400px; height:400px; margin:40px; padding:40px; display:inline-block;}
#primera {border:dashed 2px #F4FA58; background-color:#FF0000; background-image:url(http://tienda.bricogeek.com/2860-home_default/matriz-de-led-i2c-8x8-bicolor-pixel-cuadrado.jpg);
          background-repeat:no-repeat; background-position:50% 50%;}
#segunda {border:solid 3px #0101DF; background-color:#00FF00; background-image:url(http://www.movieonmovil.com/data/thumbf/Kids/Little_Child.jpg);
         background-repeat:no-repeat; background-position:center center;}
#tercera {border:dotted 1px #81F7F3; background-color:#FFFF00; background-image:url(http://www.eleconomista.es/CanalPDA/files/pixels-580px-220x135.png);
		background-repeat:no-repeat; background-position:50% 50%;}
#cuarta {border: groove 5px #045fb4; background-color:#FA58f4; background-image:url(http://ecx.images-amazon.com/images/I/61PFBsQeh9L._SL246_SX190_CR0,0,190,246_.jpg);
        background-repeat:no-repeat; background-position:50%;}

La pregunta que quiero hacer, es que en anteriores entregas, y comprobandolo me funciona (pero en esta ocasión no logro hacerlo) con

Código: [Seleccionar]

body {width85%; margin:auto;}
deberia alinearme las cajas interiores centradas con el body pero no lo logro hacer,
hago algo mal? o lo que deberia hacer es un div global para las cuatro imagenes y ese es el que saldria centrado con el body?

Cuando le pongo un div general a todos los divs, y pongo un 100% de width se me desborda del body, puede que sea por el border del body que pongo, pero no acaba de cuadrar ni a 94%, dejo el codigo para más facil visualización.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<link rel="stylesheet" type="text/css" href="estilos131D.css"/>
	</head>
	<body>
		 <div id="global">
			<div id="primera"></div>
			<div id="segunda"></div>
			<div id="tercera"></div>
			<div id="cuarta"></div>
		 </div>
	</body>
</html>

estilos131D.css

Código: [Seleccionar]

/*Estilos CSS Ejercicio131D.css*/
body {width:90%; margin:auto; border:solid;}
div {width:400px; height:400px; margin:40px; padding:40px; display:inline-block;}
#global { background-color:grey; margin:auto; width:94%; height:100%;}
#primera {border:dashed 2px #F4FA58; background-color:#FF0000; background-image:url(http://tienda.bricogeek.com/2860-home_default/matriz-de-led-i2c-8x8-bicolor-pixel-cuadrado.jpg);
          background-repeat:no-repeat; background-position:50% 50%;}
#segunda {border:solid 3px #0101DF; background-color:#00FF00; background-image:url(http://www.movieonmovil.com/data/thumbf/Kids/Little_Child.jpg);
         background-repeat:no-repeat; background-position:center center;}
#tercera {border:dotted 1px #81F7F3; background-color:#FFFF00; background-image:url(http://www.eleconomista.es/CanalPDA/files/pixels-580px-220x135.png);
		background-repeat:no-repeat; background-position:50% 50%;}
#cuarta {border: groove 5px #045fb4; background-color:#FA58f4; background-image:url(http://ecx.images-amazon.com/images/I/61PFBsQeh9L._SL246_SX190_CR0,0,190,246_.jpg);
        background-repeat:no-repeat; background-position:50%;}

Mario R. Rancel · « **Respuesta #1 en:** 19 de Febrero 2016, 09:36 »

Buenos días, estás utilizando la propiedad display, que cronológicamente con el programa del curso todavía no debe usarse. El ejercicio está bien.

El problema que comentas no entiendo bien lo que quieres decir, elimina margin:40px; padding:40px; y comprueba lo que ocurre, puede que te oriente.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: