作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
再次问这个问题是因为它被标记为重复(实际上不是),我觉得它被埋没了。在将此标记为另一个线程的另一个副本之前,请先阅读。
我试图将一些不规则形状的缩略图居中对齐到一个网格中,该网格随着浏览器窗口的缩小而分成几列。我真的很熟悉这段代码,但是我需要在每张图片下加上说明文字。我找不到这个问题的答案。我认为 figcaption 会起作用,但它奇怪地对齐了。缩略图的最大尺寸为 200px^2。所有这些缩略图都保持它们的比例。
//CSS
.centered {
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid red; /* for testing only */
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
float:left;
}
//HTML
<div class="centered">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="centered">
<img src="http://placehold.it/150x200" alt="" />
<figcaption>This text isn't working properly</figcaption>
</div>
<div class="centered">
<img src="http://placehold.it/200x160" alt="" />
</div>
<div class="centered">
<img src="http://placehold.it/140x200" alt="" />
</div>
<div class="centered">
<img src="http://placehold.it/200x150" alt="" />
</div>
最佳答案
基本上您需要更改您的 html。您应该在 figure
标签中使用 image
和 figcaption
。
.centered {
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid red; /* for testing only */
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
float:left;
}
figure{
margin:0;
padding:0;
}
figure img{
display:block;
margin: 0 auto;
}
<div class="centered">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="centered">
<figure>
<img src="http://placehold.it/150x200" alt="" />
<figcaption>This text isn't working properly</figcaption>
</figure>
</div>
<div class="centered">
<img src="http://placehold.it/200x160" alt="" />
</div>
<div class="centered">
<img src="http://placehold.it/140x200" alt="" />
</div>
<div class="centered">
<img src="http://placehold.it/200x150" alt="" />
</div>
关于css - 对齐居中的垂直和水平不规则缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34409350/
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。 例子: .parent { width: 100px; height: 100p
我是一名优秀的程序员,十分优秀!