<img class=" size-thumbnail wp-image-2105" src="http://coolvillage.es/wp-content/uploads/2015/05/spiderman-150x150.png" alt="spiderman" width="150" height="150" />
Spider-Man es uno de los superhéroes más populares y exitosos comercialmente[…]
Como resultado, en nuestra entrada se verá una imagen inline y un texto que le sigue. No muy atractivo a la vista:
Para arreglarlo, solemos utilizar el editor visual de WordPress; que es más cómodo que añadir las clases a mano. Pero escribir el código tampoco es una mala opción. El editor nos permite flotar la imagen a la izquierda, derecha o centrarla y es posible hacerlo sin problema:
Pero si el tema es creación propia y no hemos añadido las clases necesarias, esto no tendrá efecto alguno. Ya que lo que hace el código es añadir una clase u otra a la imagen para realizar la alineación.
<img class=" size-thumbnail wp-image-2105 alignleft" src="http://coolvillage.es/wp-content/uploads/2015/05/spiderman-150x150.png" alt="spiderman" width="150" height="150" />
Spider-Man es uno de los superhéroes más populares y exitosos comercialmente.
Arriba se observa cómo ha añadido la clase alignleft
esperando que tenga propiedades coherentes con lo que se quiere hacer: flotar la imagen a la izquierda. Pero si queremos que esto funcione con un tema creado desde cero, tendremos que añadir esos selectores y sus propiedades al CSS.
alignright
alignleft
aligncenter
.alignright {
float: right;
}
.alignleft {
float: left;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
Para cubrirnos la espalda y evitar que la imagen descuadre el formato cuando se encuentre dentro de un enlace, vamos a añadir las mismas opciones para imágenes dentro de un link:
.alignright, .alignright {
float: right;
}
.alignleft, a .alignleft {
float: left;
}
.aligncenter, a .aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
En muchos sitios se recomienda usarlo de la siguiente manera: img.aligncenter {…}
pero tal vez ya sepas que es mejor poder reutilizar esos selectores en otro momento y no limitarlos a imágenes.
Una vez añadidas estas clases, veremos cómo nuestra imagen se ajusta casi perfectamente:
Sin embargo, si esta imagen tiene full background, quedará muy pegada al texto. Pero con CSS podemos anticiparnos a esta situación añadiendo márgenes a las clases:
.alignright, .alignright {
float: right;
margin-left: 1em;
margin-bottom: 1em;
}
.alignleft, a .alignleft {
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
.aligncenter, a .aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
}
Et voilà. Podemos utilizar las alineaciones del editor de WordPress con total seguridad.
Recuerda que tenemos un Curso Esencial de WordPress en donde aprenderás desde cero cómo crear sitios y blogs con el CMS más popular de todos.[maxbutton id="4" url="https://platzi.com/cursos/wordpress/?utm_source=blog&utm_medium=cta2_curso&utm_campaign=blog-css-wp"]