2-7编程为什么我的图片可以相对于上一级居中，而文字描述不可以？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">   
    <title>CSS布局</title>
    <style type="text/css">
    h2{
        text-align:center;
    }
    .main{
        width:800px;
        margin:0 auto;
    }
    .main .picAndDes{
        width: 50%;
        float:left;
        text-align:center;
        background:grey;
    }
    .main .picAndDes img{
        width:350px;
        height:210px;
        padding:10px;
        background:orange;
    }
    .main .picAndDes .des{
         
        width:350px;
        padding:0 10px;
        text-align:justify;
        background:pink;
    }
         
    </style>
</head>
<body>
    <h2>ENJOY THE LIFE</h2>
    <div class="main">
        <div class="picAndDes">
            <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg">
            <div class="des">Life is like a book, just read more and more<br>refined, more write more carefully. When read,<br>mind open, all things have been indifferent to <br>heart. life is the precipition.</div>
        </div>
        <div class="picAndDes">
            <img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg">
            <div class="des">Life is like a cup of tea. let people lead a<br>person to endless after tastes. You again good<br>taste, it will always have a different taste,<br>different people will have different taste<br>more. </div>
        </div>
    </div>
</body>
</html>

如上代码。

在picAndDes的样式中设置了text-align:center;

那么其内容应该是水平居中的。

但从效果上看，

img 相对于picAndDes居中了；

但des却未能居中。

为什么？

除了计算des的padding值，

有其他的使其快速居中的方法吗？

穿越满天星 2017-10-20

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

收起

3回答

怎么都被占用了呢回答被采纳获得+3积分 2017-10-22 16:05:03

text-align:center; 会使文本和内联元素居中，但是des是块元素，所以不起作用，块元素的居中方式可以参考上述同学的方法。

收起回答

穿越满天星提问者 #1

非常感谢！

2017-10-24 19:43:52
穿越满天星提问者 #2

再问一下，text-align: center; 会使文本和内联元素居中，有要求必须是块级元素内的文本和内联元素吗？

2017-10-24 19:48:55
穿越满天星提问者 #3

刚发现，当des不设置宽度时，text-align: center也能起作用

2017-10-28 17:37:18