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值，
有其他的使其快速居中的方法吗？
24
收起
正在回答
3回答
text-align:center; 会使文本和内联元素居中，但是des是块元素，所以不起作用，块元素的居中方式可以参考上述同学的方法。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星