3-4编程练习
来源：3-4 编程练习
KAGITO
2018-06-20 19:37:04
总感觉怪怪的，图片怎么居中？然后每一块文字的边框和上面图片中间有点缝隙怎么弄掉？应该如何修改代码？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
border: 1px dashed gray;
}
.line{
overflow: hidden;
}
.pc{
float: left;
margin: 30px 70px;
}
img{
width: 250px;
}
.txt{
border:1px solid gray;
width: 250px;
}
</style>
</head>
<body>
<div class="line">
<div class="pc"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
<div class="pc"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
<div class="pc"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
</div>
<div class="line">
<div class="pc"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
<div class="pc"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
<div class="pc"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<br>
<div class="txt">欢迎来到慕课网学习新知识</div>
</div>
</div>
</body>
</html>写回答
1回答
-
Bohemian_Yoke
2018-06-21
通过margin调整外边距让图片居中排列
0
相似问题