如何让中间的图文混排不使用内外边距居中显示
来源：2-7 编程练习
慕虎1507818
2020-06-08 15:40:20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{padding:0;
margin:0;
}
.main{
width:1000px;
height:500px;
margin:0 auto;
}
h3{
line-height: 40px;
text-align: center;
}
.main .middle{
width:1000px;
height:460px;
text-align: center;
}
.main .left,.main .right{
width:430px;
float:left;
margin:0 20px;
text-align:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="main">
<h3>ENJOY THE LIFE</h3>
<div class="middle">
<dl>
<div class="left">
<dt>
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
</dt>
<dd>
Life is like a book, just read more and more refined more write more carefully. When read, mind open,all things have been indifferent to heart. Life is the precipitation.
</dd>
</div>
<div class="right">
<dt>
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
</dt>
<dd>
Life is like a cup of ten, let people lead a person to endless aftertastest. You again good taste, it will always have a different taste, different people will have different taste more.
</dd>
</div>
</dl>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕夭夭
2020-06-08
同学你好，这里设置的外边距并没有让内容在父容器中居中，如下：
因为内容总宽度比父容器的宽度小，所以右侧有剩余，导致内容无法居中。这里想要给内容设置居中，参考如下：
text-align: center可以让元素里面的文本或者行内元素，行内块元素居中。代码中给middle设置了text-align: center，那么可以让它的子元素成为行内块元素，子元素就能在middle中居中了。
设置之后的效果，可以按F12查看：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
老师请问为什么实现不了图片居中？
回答 1