39,118
社区成员
发帖
与我相关
我的任务
分享怎么让四个DIV在一个大DIV里水平居中分布
父 DIV属性
高：300px;
宽:1200px;
四个子DIV
高：300px;
宽；180px；
像PS那种把四个矩形框选中之后，就可以自动把间隙对齐。
高：300px;
宽:1200px;
四个子DIV
高：300px;
宽；180px；
像PS那种把四个矩形框选中之后，就可以自动把间隙对齐。
...全文
请发表友善的回复…
发表回复
潇湘忆梦 2019-08-13
- 打赏
- 举报
这篇博客讲的很详细，可以学习下：https://blog.csdn.net/weixin_37580235/article/details/82317240
潇湘忆梦 2019-08-13
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
.d_parent {
width: 1200px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.d_children {
width: 300px;
height: 180px;
background-color: green;
}
</style>
</head>
<body>
<div class="d_parent">
<div class="d_children">111</div>
<div class="d_children">222</div>
<div class="d_children">333</div>
<div class="d_children">444</div>
</div>
</body>
</html>
天际的海浪 2019-08-13
- 打赏
- 举报
去看看Flexbox布局模式的justify-content属性的 space-between或 space-around
http://www.webhek.com/post/flexbox-playground.html
weixin_38122772 2019-08-13
- 打赏
- 举报
不是很清楚你的需求，四个子div无间隙居中在父div中吗？根据你的宽高设置，只需要父div设置{ display: flex; justify-content: center; }就可以了
