Can't Center Images

  • I use the Revolution Code Blue and I’ve been using it since 2009.

    I’ve never been able to center images.

    I added the following code to my site:

    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    .alignright {float:right; }
    .alignleft {float:left; }
    .aligncenter {display: block; margin-left: auto; margin-right: auto}

    But nothing changed even after clearing cache.

    Images align left and right without problem. It’s only centering that doesn’t work.

    This is an example of my most recent problem: https://nowthinkaboutit.com/2014/02/easily-add-affiliate-link-to-images/

    If you can help it would be appreciated. Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • C W (VYSO)

    (@cyril-washbrook)

    The following rule is overriding your attempts to style .aligncenter:

    #contentleft p a img {
  float: left;
  /* padding-top: 10px; padding-right: 15px; padding-bottom: 10px;*/
  margin:10px 15px 10px 0px;
  border:1px solid #ccc;
}

    The rule begins on line 334 of your stylesheet. Specifically, the float and margin declarations are preventing the centring of the images. This rule overrides your attempts to target .aligncenter because it uses a more specific selector.

    Thread Starter EnnisP

    (@ennisp)

    Thanks Cyril.

    Question: Should I delete the entire rule or just the float and margin portions?

    Or would changing the selector make the difference?

    Sorry for all the questions, just not sure what to do.

    Thanks again.

    Thread Starter EnnisP

    (@ennisp)

    Hey Cyril,

    You are right because I commented out the float and margin lines and the image on the sample post was centered with the text not wrapping but there were unwanted results also.

    I have images at the top of most of my posts, aligned left, with the text wrapping. With float and margins commented out the images stayed left but the text didn’t wrap anymore.

    So, my experiment didn’t work. Not sure what to do.

    Can anyone help?

    Thanks

    C W (VYSO)

    (@cyril-washbrook)

    Use the following rule:

    #contentleft p a img.aligncenter {
   float: none;
   margin: 1em auto;
}

    As stated above, more specific selectors take precedence: #contentleft p a img.aligncenter is more specific than #contentleft p a img.

    Thread Starter EnnisP

    (@ennisp)

    Thanks a million Cyril! That worked like a charm.

    Very happy to get this resolved. All the best.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can't Center Images’ is closed to new replies.