Centering pictures

  • I can’t figure out how to center my images on my site PromMafia.com. It is only an issue when I add a caption to the images, but I add captions to most images. I have tried pressing the ‘center’ button, selecting center when uploading, and adding centering html to each image. I have a feeling it is an issue with the CSS. I’m a beginner though and have no idea how to find the problem. Here is the code from the style sheet. Can someone help?

    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
    }

    .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:4px;
    -khtml-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    }

    .wp-caption img {
    padding: 0;
    border: 0 none;
    text-align:center;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    color:#009DA0;
    text-align:center;
    }

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

  • Try amending:

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

    to

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

    If that doesn’t work, post a link to your site.

    Thread Starter prommafia

    (@prommafia)

    Didn’t work. Here is a link to the site: https://prommafia.com/

    Edit style.css (line 463)

    .wp-caption {
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
}

    and remove margin:10px;.

    Thread Starter prommafia

    (@prommafia)

    you’re amazing! Thank you!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Centering pictures’ is closed to new replies.