Images won't align Center, Right… CSS issue?

  • Here’s the site and page I’m playing with: https://www.charcrust.com/848/

    The first image with the caption aligns nicely to the right. The second image at the bottom with no caption is set to aligncenter. But, as you can see, it doesn’t. It also doesn’t alignright either. I can’t get any of the photos (without captions) to align center or right. They all just align left no matter how I’ve set them in either the Image Details or the actual code.

    I have added code to the .css file to align the photos with captions and that has worked. I’ve similarly added code for aligncenter et al and that hasn’t. Below is my entire .css file. Maybe some snippet of code is blocking the align styles from working…?

    /* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body{
  margin:0px;
  padding:0px;
  height:100%;
  min-height:100%;
  width:100%;
}

#container{
	position: absolute;
  top: 0;
  padding: 0;
	height: auto !important;
  height: 100%;  /*for ie6*/
  width:100%;
  min-height: 100%;

}

/*Float clearing fix*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
* html .clearfix {height: 1%;}

/*reset default padding*/
/*img{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border:none;
}*/

form{
	margin:0px 0px 0px 0px;
}

ul{
	padding-left:1em;
	margin-left:0;
	margin-bottom:0;
}

h1{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

p{
	margin:15px 0 0 0;

}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

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

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

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

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

    Anyone see where the issue is?

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

  • I had a look at a page of your site.
    This caught my eye:

    div#largecol div#interior_wrapper img {
		float: left; <strong>/*change this to right/left as required; remove to center the image*/</strong>
		display: inline;
		padding: 3px;
		background-color: #fff;
		margin: 5px 15px 0px 0px;
	}
    Thread Starter sbender

    (@sbender)

    Oh man, that totally fixed it. I just removed the “float: left;” line and the images are now aligning based on how I specify when I add them to a post.

    Thanks so much! I kept looking for the piece of code that was interfering with the alignment but just couldn’t find anything that seemed to be affecting it. What was your trick? Did you search for “img” or for “float:left”? Or, just go through each style sheet one at a time?

    I’m having this same issue, but can’t find that code snippet in my stylesheets. Which one does it fall under?

    Thread Starter sbender

    (@sbender)

    In mine, it was in a style sheet named grid.css.

    Hooray!! Just did more digging and figured out that it was an issue with a Pin-It plug in. Solution here for anyone else:

    https://github.com/canha42/pinterest-pin-it/issues/58#issuecomment-50097961

    @sbender:

    What was your trick? Did you search for “img” or for “float:left”? Or, just go through each style sheet one at a time?

    I used a browser-pluging ‘firebug’ to inspect elements on your site.
    I looked for things that controlled your image[s], and experimented a bit to see what would happen if I changed things…
    Some 15 mins. later I stumbled over this thing…

    BTW:
    Please don’t forget to mark the thread as ‘resolved’ [in the right sidebar]

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Images won't align Center, Right… CSS issue?’ is closed to new replies.