Ejercicios de HTML - Centrar DIVS

Ejercicios de HTML resueltos. Ejercicios sencillos para aprender acentrar divs en HTML. Ejercicios sencillos para aprender lenguaje de marcas y maquetaciÃ³n web.

1.- Crea un div de 200px de ancho dentro de un contenedor principal y cÃ©ntralo en la pantalla. Ponle un marco negro para poder visualizarlo.

2.- AÃ±ade otro contenedor de 200px y centra ambos en la pantalla.

3.- AÃ±ade un tÃtulo en negrita a cada uno de los contenedores y un texto explicativo.

4.- Haz que un contenedor flote a la izquierda y el otro a la derecha, a la misma altura.

<div style="width:100%">
	<style>
		.contenedor_principal{
			width:100%;
			display: block !important;
		}
		.con_marco{
			display: inline-block; /* AquÃ estÃ¡ la clave para los bloques */
			border: 1px;
			border-style: solid;
			text-align: center;
			width:200px;
			padding: 15px;
		}
		.flota_izquierda{
			float:left;
		}
		.flota_derecha{
			float:right;
		}
	</style>

<p> Ejercicio 1</p>
	<div class="contenedor_principal">
		<center>
			<div class="con_marco">Hola soy un contenedor</div>
		</center>
	</div>

<br/>

<p>Ejercicio 2</p>
	<center>
		<div class="contenedor_principal">
			<div class="con_marco">Hola soy un contenedor</div>
			<div class="con_marco">Hola soy un segundo contenedor</div>
		</div>
	</center>

<br/>
	<p>Ejercicio 3</p>
	<center>
		<div class="contenedor_principal">
			<div class="con_marco"><h3>TÃtulo 1</h3><p>Hola soy un texto explicativo dentro de un div</p></div>
			<div class="con_marco"><h3>TÃtulo 2</h3><p>Hola yo tambiÃ©n soy un texto explicativo dentro de un div</p></div>
		</div>
	</center>

<br/>
	<p>Ejercicio 4</p>
	<center>
		<div class="contenedor_principal">
			<div class="con_marco flota_izquierda"><h3>TÃtulo 1</h3><p>Hola soy un contenedor</p></div>
			<div class="con_marco flota_derecha"><h3>TÃtulo 2</h3><p>Hola soy un segundo contenedor</p></div>
		</div>
	</center>
</div>
<br/>

Ejercicio resuelto - DemostraciÃ³n

Ejercicio 1

Hola soy un contenedor

Ejercicio 2

Hola soy un contenedor

Hola soy un segundo contenedor

Ejercicio 3

TÃtulo 1

Hola soy un texto explicativo dentro de un div

TÃtulo 2

Ejercicio 4

TÃtulo 1

Hola soy un contenedor

TÃtulo 2

Hola soy un segundo contenedor

Ejercicios de HTML - Centrar DIVS

Ejercicio resuelto - DemostraciÃ³n

TÃtulo 1

TÃtulo 2

TÃtulo 1

TÃtulo 2

ProgramaciÃ³n

Mysql

Terminal ubuntu

Ejercicios de HTML - Centrar DIVS

Ejercicio resuelto - DemostraciÃ³n

TÃ­tulo 1

TÃ­tulo 2

TÃ­tulo 1

TÃ­tulo 2

ProgramaciÃ³n

Mysql

Terminal ubuntu

TÃtulo 1

TÃtulo 2

TÃtulo 1

TÃtulo 2