Centralizando imagens em temas WordPress

Ao criar um tema em WordPress, alguns detalhes devem ser levados em consideração para evitar dores de cabeça no futuro.

Um detalhe que pode incomodar um pouco se não pensado na hora do desenvolvimento do tema, é o alinhamento de imagens quando estamos  editando uma postagem ou uma página, por padrão, quando clicamos nos botões de alinhamentos de itens no editor de textos do WordPress ele atribui a esse elemento algumas classes que são: alignleft (alinhamento à esquerda), alignright (alinhamento à direita) e aligncenter (alinhamento centralizado), essas classes por padrão são as responsáveis por alinhas elementos e imagens dentro do container dos posts, o que devemos fazer é apenas determinar o comportamento dessas classes em nossa folhas de estilos do template.

 

No arquivo style.css do seu tema basta incluir os seguintes códigos:

 

Para alinhamento à esquerda

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}

Para alinhamento à direita

img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}

Para alinhamento centralizado

img.aligncenter, div.aligncenter {
margin-left: auto;
margin-right: auto;
display: block;
}

Após inserir o código a cima os botões de alinhamento do editor vão funcionar normalmente e ao visualizar suas postagens as imagens vão seguir o devido alinhamento de cada classe.