Dario BF | Blog personal de Darío Balbontín

Ahora que estoy preparando un tema nuevo para el blog, me doy cuenta que al insertar imágenes y alinearlas directamente desde wordpress falla la alineación (la inserta siempre a la izquierda y no flotante).

Basta con mirar un poco por encima el tema default de wordpress para darse cuenta que hay unas propiedades que marcan estas pautas.

El código que hay que insertar en el CSS del tema que estamos creando es el siguiente:

Código:

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
 
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
 
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */
 
/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}
 
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
 
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
 
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}
 
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
 
.alignright {
	float: right;
	}
 
.alignleft {
	float: left;
	}
/* End Images */