How To Center Align Captioned Image In WordPress

Sometimes working with images in WordPress could be a nightmare. And in worst case it might take you hours to figure out even a simple fix such as aligning captioned image in center.

By default most of WordPress theme developers ignore the Image alignments and leave it to the mercy of users. I’ve never found a single WordPress theme which comes with all the aspect of Image alignment and caption implemented in the theme. In all cases I’ve to write wp-caption css in the stylesheet.

Aligning captioned images in center was the new nightmare for me which I kept ignoring until today when I decided to nail it down for once and all.

First I played around with some css tricks but it didn’t work. The problem was that I was working with .aligncenter which was not the correct css to fix.

Finally I discovered a simple fix. The fix is to make left and right margin to be auto in .wp-caption.

Just add following in your theme’s .wp-caption definition and it will fix all.

[sourcecode]margin-left: auto; margin-right: auto;[/sourcecode]

However this might create another problem for Captioned left alignment. So you have to work out on that too.

Here is my css code for all the caption and alignment related styles.

[sourcecode]
.entry .alignleft
{ float: left; width: auto; margin:6px 15px 10px 0; }

.entry .alignright
{ float: right; width: auto; margin:6px 0 10px 15px; }

.entry .aligncenter
{ text-align: center !important; }

.wp-caption {
border: 1px solid #e6e6e6;
text-align: center;
background-color: #F8F8F4;
padding:6px 2px 0 2px;
margin:0 auto 10px auto;
}

.wp-caption img {
margin:0 0 10px 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 12px; text-align:center;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
[/sourcecode]