Saturday, March 13, 2010

Wordpress Aligncenter

I've been trying to update my other blog  - Through the Eye Piece - and for a while I've been running into issues aligning my images to center them.  I was using an old theme that I've tweaked to layout the way I wanted but with so many CSS changes I never got around to fixing my image alignment until now.  With the help of Firefox plugin called Firebug, I was able to track down the align class that wordpress assigned to the image and then checked my CSS to see if it's there.  Firebug with it's grace and awesome functionality showed me that I had no aligncenter CSS associated with this image.  I googled search and found the following CSS post on Wordpress Codex that resolved the problem.  Since this was an old wordpress theme some CSS was missing but luckily it was an easy fix.  It also incidentally resolved another quirk I was running into, the caption for the images was not showing up.

To make it easier for everyone you can just past the following into your stylesheet and it should resolve your alignment issue along with your caption issue too.
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-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;
}

Now the next problem to battle, lazy load my long image posts.

No comments:

Post a Comment