Se puede crear una sencilla caja con CSS, aplicando a un div una clase. Esta caja es un método de aprender a estructurar la plantilla de nuestro sitio web.

El código CSS a implementar sería este:

<style type="text/css" media="screen">

.box {
background:#829900;
color:#fff; padding: 5px;
height: 340px;
width: 340px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}
</style>

Y el código HTML con el div llamado a la clase sería este:

<div class="box">
Texto en la caja
</div>

Si nos fijamos, el margin de la izquierda y derecha es auto, eso hará que la caja esté centrada horizontalmente. Si deseamos centrarla verticalmente, le hacemos el auto a margin-top y margin-bottom.

Ya tendremos nuestra sencilla caja creada en CSS.

Se puede ver un ejemplo de su funcionamiento.

Vía | Pmob

Compartir/Guardar