2-7请问我的2个图片如何居中？
来源：2-7 编程练习
Larry要加油好好学习
2020-10-13 22:02:03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{padding:0;margin:0;}
.top{width:1000px;font-size:20px;font-weight:bold;font-family:"宋体";text-align:center;margin:0 auto;margin-top:20px;}
.con{width:1000px;margin:0 auto;height:500px;}
dl{float:left;width:400px;margin:20px;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">ENJOY THE LIFE</div>
<div class="con">
<dl>
<dt><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"></dt>
<dd>I want to do everything I can to give him a good start in life.I want to do everything I can to give him a good start in life.</dd>
</dl>
<dl>
<dt><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"></dt>
<dd>I want to do everything I can to give him a good start in life.I want to do everything I can to give him a good start in life.</dd>
</dl>
</div>
</body>
</html>
1回答
-
好帮手慕糖
2020-10-14
同学你好，这里可以设置包裹两个图片的大盒子（.con这个盒子）的宽度等于包裹的两部分之和，然后设置这个大盒子水平居中，这样它的内容就可以居中了。整体的修改步骤可以参考如下：
1、如下，在控制台中选中dt这个元素，可以发现图片的宽度时候比父级盒子要大的，超出了。
建议：可以设置图片的宽度为父级盒子宽度的100%，例：
2、一个dl的宽度是400px，左右外边距各20px，所以占据的总宽度是440px，一行两个，所以宽度之和是：440px * 2 = 880px，所以外层的大盒子宽度为880px。例：
3、还有一点优化建议：标题可以直接使用h3标签，存放在con中，然后设置内容居中，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题