html - 如何在 CSS 中居中图片库?
问题描述
我已经创建了一个图片库,但我不确定如何将图像水平和垂直居中放置在页面中间。
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
我的 CSS 类是
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
它显示在顶部,我不知道如何让它们并排
解决方案
你能检查下面的代码吗?希望它对你有用。
您必须为所有gallery
元素添加一个父元素,并将 flex 实用程序属性赋予该父元素。您需要根据要求设置图库父元素的高度(目前,我们为下面的演示设置了视口高度)。
推荐阅读
- python - 在文件夹中的多个文件上运行 Python 脚本
- javascript - 纪元时间到底是什么时候?在 PHP 中转换客户端时区的纪元?
- react-native - 如何使用原生模块创建 react-native android 模块?
- excel - Excel SUMIFS 检查列是否包含文本
- c# - C#如何通过Linq查询为每个数据行在现有数据表中添加一列?
- database - 每日交付系统的数据库模式?
- javascript - 在函数中渲染 JSX 元素
- sql - 如何替换 SQL 更新查询中的分隔列值?
- java - Fortify 认为强类型对象上存在日志伪造,除非我手动调用 .toString()
- batch-file - 星号批量扩展