Gnet Solutions :: Revolution Wordpress theme: How to Align Images Properly in Your Posts

Knowledgebase Home

Search the Knowledgebase

Browse by Category

Knowledgebase Home > Applications > Blog Software > Wordpress

Revolution Wordpress theme: How to Align Images Properly in Your Posts

How to Align Images Properly in Your Posts

Many of my Revolution themes have come with the automatic styling of images within posts to align to the left. Recently, I've had a lot of people ask why their images won't align the way they select inside their post editor, and here's why. The current styling of most themes has this (or a close derivative) in the CSS stylesheet:

Code:

#contentleft p img {
border: none;
float: left;
margin: 0px 10px 10px 0px;
}

WordPress has recently assigned class to each alignment for images, so to make things easier, and for you to be able to easily align images within your posts, delete the above code in your CSS stylesheet and add the section below in that file:

Code:

/************************************************
* Images *
************************************************/

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

img.alignnone {
padding: 0px;
margin: 0px 0px 10px 0px;
display: inline;
}

img.alignright {
padding: 0px;
margin: 0px 0px 10px 10px;
display: inline;
}

img.alignleft {
padding: 0px;
margin: 0px 10px 10px 0px;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

.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;
}