3-4编程问题
来源：3-4 编程练习
qq_墨羡_0
2018-08-05 14:47:48
下面是我的代码，我想问一下，怎么修改更好？如何让浮动元素居中显示？以及怎么让图片和文字形成一个整体？
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<mate charset="utf-8">
<title>网页编程练习</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
margin:0 auto;
width:1200px;
}
.first{
width:900px;
border:2px solid red;
overflow:hidden;
margin:auto;
}
.first .img{
width:220px;
float:left;
padding:20px;
text-align:center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="first">
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div><div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div><div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div>
</div>
<div class="first">
<div class="img">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div><div class="img">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div><div class="img">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br/>
欢迎来到慕课网学习新知识
</div>
</div>
</div>
</body>
</html>
1回答
-
你好，达到浮动元素居中的效果，一个.first里只有一个.img，要使元素居中可以计算浮动元素的宽高，以及外围div的宽高，通过padding或者margin来实现居中，而在本题中，基于你的代码设置，可以做如下修改：不要限定每个.img的宽度，让图片和内容自然撑开每一个div,通过计算，设置padding为9px,
这里同学写的图片和文字就是在一个div框中的，当然文字也可以使用其他的标签比如span包裹起来，方便根据具体要求对它进行样式设置。
如果解决了你的问题，请采纳，祝学习愉快~
0h018-08-08
相似问题