CODEWITHSUNDEEP
htmlcssresponsive-design
Steve G.
Steve G.

Reputation: 409

CSS: Image Isn't Centered

On this page, https://www.inagalaxyfarfarawry.com/characters.php, I have my pictures aligned to the right in small squares. But when the window shrinks down to 600px width, I'd like the image to be centered. But I have no idea why it isn't. There's probably some other css element getting in the way somewhere, but no matter what I've tried and no matter how much I beat my head against the wall, nothing is working.

Can anyone shed some light on what's going on? Thanks.

HTML snippet:

  <dl class="categories">
    <dt class="invisible">Picture</dt>
        <dd class="featureimage characterimage">
            <p>Lookin' good!<br />
                <a href="characters.php?mode=characterfocus&id=1" class="linktext">
                    <span>Click to view</span>
                    <img src="images/characters/mugshots/1.jpg" class="featureimage characterimage" />
                </a>
            </p>
        </dd>
    </dl>

CSS elements:

dl.categories { margin-top: 15px; }
dl.categories dt { font-weight: bold; float: left; padding-bottom: 5px; margin: 0 5px 0 5px; clear: left; color: #AAA; }
dl.categories dd { margin-left: 200px; padding-bottom: 5px; }
dl.categories dd.featureimage p { font-weight: bold; background-color: #131210; border: 3px solid black; color: #FFFFFF; margin-right: 5px; text-align: center; border-radius: 15px; overflow: hidden; }
dd.featureimage { margin-left: 5px !important; }
dt.invisible + dd { margin-left: 5px !important; }
body.characters dl.categories dd.characterimage { font-size: 85%; }
body.characters dl.categories dd.characterimage p img.characterimage { border-radius: 0 0 15px 15px; transition: all 0.3s ease-in-out; }
body.characters dl.categories dd.characterimage p { width: 220px; height: 235px; }
body.characters dl.categories dd.characterimage p a img.characterimage:hover { opacity: 0.2; transform: scale(1.2); transition: all 0.3s ease-in-out; }
body.characters dl.categories dd.characterimage p a img.characterimage { margin-top: -85px; }
body.characters dl.categories dd.characterimage p a.linktext { color: #FFFFFF; display: block; margin-top: 70px; }
body.characters dl.categories dd.characterimage p a.linktext span { padding: 5px; }

@media (max-width: 600px) {
    dl.categories { clear: both; }
    dl.categories dt { clear: right !important; float: initial; width: 100%; clear: left; }
    dl.categories dd { clear: right !important; width: 95% !important; margin-left: 5px !important; margin-right: 5px !important; }
    dl.categories dd.featureimage, div.featureimage { float: initial; text-align: center; }
    dl.categories dd img.featureimage { float: initial; }

Yeah, there's a lot going on with the CSS, and it ain't pretty.

Upvotes: 0

Views: 56

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

body.characters dl.categories dd.characterimage p is your container for the image and caption. You set it to a set width and height, and it can do that because it's a block level element, but block level elements don't behave like text. That's why text-align: center doesn't work on it. You could instead go with a happy medium of display: inline-block to allow for you to both give it a width and allow it to be centered using text alignment. Be aware, however, that this will give it other properties like line-height. To accomodate for that, you could add vertical-align: top to make sure it doesn't add any odd spacing after it.

So in short, you need your paragraph rule to be as follows:

body.characters dl.categories dd.characterimage p {
    width: 220px;
    height: 235px;
    display: inline-block;
    vertical-align: top;
}

Upvotes: 1

Related Questions