3-4练习题居中问题
来源：3-4 编程练习
慕九州2710224
2019-03-25 00:57:54
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
div,ul,li,img,p {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
div {
width:100%;
text-align:center;
border:1px #ccc dashed thick;
background:#cfcfcf;
}
ul {
overflow:hidden;
margin:0 auto;
}
li {
float:left;
text-align:left;
border:1px #cecece solid;
margin:10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div>
<ul>
<li>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
<ul>
<li>
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
<li>
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg" />
<p>欢迎来到慕课网学习新知识！</p>
</li>
</ul>
</div>
</body>
</html>代码如上，效果如下
我想要所有的图片都在div居中，我尝试设置了ul {display:table-cell;}，但是图片乱序了。
我又尝试给ul {margin:0 auto;}，但是没有居中效果。
请问怎么才能居中
写回答
1回答
-
同学你好，1、这里使用display:table-cell;设置ul居中具体是如何设置的？
不过这里若使用margin设置居中，这里同学是否没有设置宽度呢？是要设置宽度的哦。宽度要等于一行三个li占据的宽度之和，一个li占据的宽度是262px（包括边框与外边距），一行三个262*3 = 786；所以li可以设置宽度786px，例：
2、这里最外层是要有边框的，所以建议：可以设置最外层的div居中，给div设置的边框，可以参考下效果图哦。
3、边框属性设置错误，不需要后面的thick，且背景颜色也不需要哦，整体可以参考如下：
希望能帮助到你，欢迎采纳。
祝学习愉快！
1
相似问题