Photo Alignment Issues

  • Is there a specific place somewhere in the backend that turns on photo alignment? We have a custom designed WordPress layout, but none of the alignments that we put on photos are staying in place when the posts publish. The right align or left align settings just drop and the text drops to the corner of the photo instead of wrapping. Is there something in the back that should be checkmarked or something that we should implement?

Viewing 2 replies - 1 through 2 (of 2 total)

  • style.css

    start with adding the respective styles (copied from kubrick default theme) to the style.css of your theme:

    /*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

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

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */

    if there are still alignment issues left, report back with a link to your site.

    Depends on your theme. Nobody here can check for you, since you didn’t include a link to your site. Does your theme style.css file have some sort of standard image handling css?

    looks something like:

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

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
.alignleft {
	float:left;
	padding:2px 0 0 10px;
	}
.alignright {
	float:right;
	padding:2px 10px 0 5px;
	}
.wp-caption.alignleft {
         float:left;
         margin-left:0;
         margin-right:5px;
         }
.wp-caption.aligncenter {
         margin-left:auto;
         margin-right:auto;
         }
.wp-caption.alignright {
         float:right;
         margin-left:5px;
         margin-right:0;
         }

    If not, add this. You may need to tweak it a bit, but it works for me

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Photo Alignment Issues’ is closed to new replies.