                        课程
                    
                        /前端开发
                        
                            /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>

紫陌东城

2016-03-02

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

关注问题我要回答

330

操作

收起

1 回答

_aa 回答被采纳 +3 积分
2016-03-02

<!DOCTYPE HTML>

<html>

<head>

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

<style>

.container{

height:300px;

background:#ccc;

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

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

}

span { height:300px;

background:#ccc;

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

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

}

</style>

</head>

<body>

<div>

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

</div>

<div>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

紫陌东城提问者

如此这般。。谢谢

2016-03-02 回复有任何疑惑可以回复我~

福尔摩牙

这里是不是因为使用了display:table-cell 的原因，使块状元素拥有了内联元素同行显示的特性呢？如果在后面再加一个display：block 就会和你上面的效果一样了呢？

2016-03-04 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1227406 人
解答问题 18248 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

5 回答为什么有的内联元素不是显示在同一行？

3 回答float:left应该是两个内容在同一行显示，为什么显示出来却是同一列的左对齐

3 回答为什么<h1>和<h2>不能显示在同一行里，

2 回答多张图片怎么同一行显示

4 回答css样式中的{}不能在写在同一行？编辑器里面为什么有些是在同一行，有些不在同一行?

搜索更多本课相关问答

为什么显示在同一行

我要回答关注问题

热搜

最近搜索清空

为什么显示在同一行

1 回答

本课相似问答

为什么显示在同一行