关于2-7练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
    .title{
        padding-top:50px;
        text-align:center;
        font:bolder 15px "微软雅黑" ;
    }
    .container{
        width:1000px;
        margin:0 auto;
    }
    .div1,.div2{
        width:450px;
        padding: 10px 10px;
        float:left;
        text-align: center;
    }
    img{

    	width:450px;

    }
    .clear{
    	clear:both;
    }
    dd{
    	padding: 0 0;
    	text-align:left;
    }
		
	</style>
    }
    }
</head>
<body>
	<div>
	    <div class="title">
	        ENJOY THE LIFE
	    </div>
	    <div class="container">
	    <div class="div1">
	        <dl>
	            <dt><img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg"/></dt>
	            <dd>Life is like a book, just read more and more refined, more write more carefuliy. when read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd>
	        </dl>
	    </div>
	    <div class="div2">
	        <dl>
	        <dt><img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg"/></dt>
	        <dd>Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</dd>
	        </dl>
	    </div>
	    <div class="clear"></div>
	    </div>
	</div>
</body>
</html>

请问老师关于1.我的代码无论我怎么调试图片下方字体距容器左边为什么有一定的距离

2.为什么我的居中效果和老师给的效果不一样

hy_wang 2017-12-14

源自：项目：网页布局案例 2-7 编程练习

收起

3回答

小于飞飞回答被采纳获得+3积分 2017-12-15 09:56:20

37、38行多的 }
关于text-align，margin：0 auto理解基本正确，但是注意细节，当子元素和父元素的宽度一样时，margin：0 auto的效果时看不出来的。
设置text-align的容器，内部的图片也有效果。

动手实践，加油。

收起回答

提问者 hy_wang 2017-12-14 22:40:05

以及我还有疑问想请问老师，为什么我把dd中的margin:0 auto;删除掉文字就会距离左边有一定距离请问为什么

收起回答

小于飞飞 #1

这是dl\dt\dd的默认样式，在不设置任何样式，默认dd相对dt有缩进，所以将margin:0 auto; 清楚，显示的是默认状态。

2017-12-15 09:47:25

提问者 hy_wang 2017-12-14 22:35:31

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
    .title{
        padding-top:50px;
        text-align:center;
        font:bolder 15px "微软雅黑" ;
    }
    .container{
        width:1000px;
        margin:0 auto;
    }
    .div1,.div2{
        width:450px;
        padding: 10px 10px;
        float:left;
        text-align: center;
       
    }
    img{
        width:400px;
         }
    .clear{
    	clear:both;
    }
    dd{
    	width:400px;
    	text-align: left;
    	margin:0 auto;

    }
		
	</style>
    }
    }
</head>
<body>
	<div>
	    <div class="title">
	        ENJOY THE LIFE
	    </div>
	    <div class="container">
	    <div class="div1">
	        <dl>
	            <dt><img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg"/></dt>
	            <dd>Life is like a book, just read more and more refined, more write more carefuliy. when read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd>
	        </dl>
	    </div>
	    <div class="div2">
	        <dl>
	        <dt><img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg"/></dt>
	        <dd>Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</dd>
	        </dl>
	    </div>
	    <div class="clear"></div>
	    </div>
	</div>
</body>
</html>
老师我将代码修改成了这个样子，请问现在效果可以吗，我想请问老师关于居中text-align：center和margin：0 auto分别有什么区别,是不是margin是针对块级元素在父容器中居中显示而text-align是让容器内的文本居中针对容器内的文本而言（）

，请问老师我的理解对吗，还有老师align对于图片有效果吗

收起回答