                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

请问为什么写完代码发现图片和文字变成一行了？怎么能让图片折到下一行？还有我发出这段代码为啥注释补上呢？

<!DOCTYPE HTML>

<html>

<head>

<title>父元素高度确定的多行文本</title>

<style>

.container{

height:300px;

background:#ccc;

display:table-cell;/*IE8以上及Chrome、Firefox*/

vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

</head>

<body>

<div>

<p>看我是否可以居中。</p>

</div>

</div>

</body>

</html>

Kon7

2016-05-03

源自：初识HTML(5)+CSS(3)-升级版 15-9

关注问题我要回答

1862

操作

收起

2 回答

慕粉3249650 回答被采纳 +3 积分
2016-05-03

.container这里设置了display:table-cell，<div style="display:table-cell; vertical-align:middle;">这里也设置了display:table-cell,相当于这两个元素变成了两个td，所以就并排了，如果将前者或后者的display:table-cell改成display:table就可以看到两排了，个人理解