html - CSS:图像不居中

Question

在此页面上，https://www.inagalaxyfarfarawry.com/characters.php ，我的照片在小方 block 中靠右对齐。但是当窗口缩小到 600px 宽度时，我希望图像居中。但我不知道为什么不是。可能有其他一些 css 元素妨碍了某处，但无论我尝试了什么，无论我用头撞墙多少次，都没有任何效果。

任何人都可以阐明正在发生的事情吗？谢谢。

HTML 片段:

  <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 元素:

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; }

是的，CSS 有很多问题，但并不漂亮。

Answer 1

body.characters dl.categories dd.characterimage p 是图像和标题的容器。您将它设置为一组宽度和高度，它可以做到这一点，因为它是一个 block 级元素，但 block 级元素的行为不像文本。这就是 text-align: center 对它不起作用的原因。您可以使用 display: inline-block 的快乐媒介，让您既可以给它一个宽度，又可以使用文本对齐方式将其居中。但是请注意，这将赋予它其他属性，例如行高。为此，您可以添加 vertical-align: top 以确保它不会在其后添加任何奇怪的间距。

简而言之，您的段落规则需要如下所示:

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