在此页面https://www.inagalaxyfarfarawry.com/characters.php上,我的图片以小方块右对齐。但是,当窗口缩小到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发生了很多事情,而且还不够漂亮。
答案 0 :(得分:1)
body.characters dl.categories dd.characterimage p
是图像和标题的容器。您将其设置为设置的宽度和高度,并且可以这样做,因为它是一个块级元素,但是块级元素的行为不像文本。这就是text-align: center
对它不起作用的原因。相反,您可以使用display: inline-block
的高兴媒介,让您既可以给它一个宽度,又可以使用文本对齐来使其居中。但是请注意,这将赋予它其他属性,如line-height。为此,您可以添加vertical-align: top
以确保其后没有添加任何奇数间距。
因此,简而言之,您需要以下段落规则:
body.characters dl.categories dd.characterimage p {
width: 220px;
height: 235px;
display: inline-block;
vertical-align: top;
}