El pequeño problema de la alineación de imágenes en Wordpress

Wordpress desde la versión 2.5 permite seleccionar la alineación de una imagen desde el cargador de imágenes. El problema es que en vez de utilizar la propiedad align lo han hecho por medio de una clase de css. Por ello la solución es introducir el siguiente código en la hoja de estilo de nuestro theme:

[COPIAR]
Código CSS (Copiar):
  1. img.alignleft, div.alignleft {
  2.     float:left;
  3.     margin:0 0.5em 0.5em 0;
  4. }
  5. img.alignright, div.alignright {
  6.     float:right;
  7.     margin:0 0 0.5em 0.5em;
  8. }
  9. img.aligncenter, div.aligncenter {
  10.     text-align:center;
  11.     margin:0 auto;
  12. }

Otra posibilidad que da Wordpress 2.6 es la de añadir Captions, si queremos que estas se vean correctamente alineadas debajo de la imagen tenemos que añadir además:

[COPIAR]
Código CSS (Copiar):
  1. .wp-caption {
  2.     border: 1px solid #ddd;
  3.     text-align: center;
  4.     background-color: #f3f3f3;
  5.     padding-top: 4px;
  6.     margin: 10px;
  7. }
  8. .wp-caption img {
  9.     margin: 0;
  10.     padding: 0;
  11.     border: 0 none;
  12. }
  13. .wp-caption p.wp-caption-text {
  14.     font-size: 11px;
  15.     line-height: 17px;
  16.     padding: 0 4px 5px;
  17.     margin: 0;
  18. }

No hace falta decir que el código es personalizable y lo podemos editar para que encaje a la perfección con el diseño de nuestra web.

 

Entradas relacionadas

Deja un comentario