html之如何让多个并列的div居中显示

最新推荐文章于 2025-06-06 22:51:36 发布

Quincy379

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量8.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_33733970/article/details/78100097

HTML 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了一种使用CSS实现图片居中与等间距排列的方法。通过设置div元素为inline-block并利用text-align:center属性使图片水平居中显示。所有图片大小一致，便于创建整洁统一的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="testContainer">
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
    <div><img src="1.png"></div>
</div>
#CSS:
#testContainer {
    text-align: center;
}
#testContainer > div {
    display: inline-block;
}
#testContainer img {
    width: 200px;
    height: 200px;
}