关于如何让一个div里面的div居中的问题
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
*{padding: 0;margin: 0;}
p{text-align: center;}
.one,.two,.three,.four,.five,.six{width: 240px;float: left;
margin: 10px;border: 1px solid #141e1b;}
.big{width:786px;border: 1px solid #20a162;
overflow: hidden;margin: 0 auto;}
.four{float: left;clear: left;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="one">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="two">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="three">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="four">
<img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="five">
<img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
<div class="six">
<img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习新知识!</p>
</div>
</div>
</body>
</html>
首先图片里面的东西现在看起来是居中的,但那是我计算好各div的宽度值的结果。如果,现在最外面的div的宽度值是800px,那么我该如何让里面的元素居中。
0
收起
正在回答
2回答
同学你好,如果最外层的div宽度为800px,可以把里面块的边距调整为左边距margin-left:18.5px;因为有了盒子和里面块的宽度,需要使用盒模型来计算。
参考下图:

再给里面的块设置margin-top:18.5px,让里面的块距离顶部有18.5像素的间隙,参考下图:

为了让第二层的图跟最外层的div的底部有些间隙,再给第二层图片设置一个margin-bottom:18.5px,参考下图:

可以试一试,祝学习愉快,望采纳!
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星