Mostrar Mensajes
21
Aprender a programar desde cero / HTML y CSS centrar una imagen verticalmente y horizontalmente CU01031D
« en: 17 de Febrero 2016, 13:09 »
Buenos días, dejo mi respuesta al ejercicio y una pregunta.
estilos131D.css
La pregunta que quiero hacer, es que en anteriores entregas, y comprobandolo me funciona (pero en esta ocasión no logro hacerlo) con
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.
estilos131D.css
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="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%;}
RSS