老师帮忙看一下，元素居中问题；跟效果差一点元素不能居中显示
来源：3-4 编程练习
慕九州2446184
2019-04-03 20:57:44
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
body{
margin:0;
padding:0;
}
div{
width:830px;
height:420px;
border:1px dotted;
overflow:hidden;
zoom:1;
}
li{
margin:0 auto;
list-style:none;
float:left;
display:inline;
padding:10px;
}
p{
width:239px;
height:19px;
border:1px solid;
border-top:0;
padding:0;
margin:-4px 0px;
}
</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>
<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>
1回答
-
同学你好，1、建议：使用通配符去除元素内外边距。
2、一个图片的宽度是240px，所以p标签可以设置为宽度238px，加上左右的边框，正好是240px哦，也不需要设置内外边距，例：
3、大盒子不需要设置高度，由子元素撑开即可。宽度设置的有点大了，一个图片单元占据的宽度是260px（包括左右内边距），一行三个，即260*3 = 780px，所以大盒子的宽度实现780px即可，例：
至于同学说的元素居中，可以查看下是否是现在的效果，若不是的话，可以详细的描述下是哪个元素居中，垂直还是水平哦。
希望能帮助到你，祝学习愉快！
1
相似问题
回答 1
回答 2