为了账号安全,请及时绑定邮箱和手机立即绑定

在这一节我想弄清楚为什么有的代码写出来的答案是并行而有些是并列呢,希望大家知道的帮我解答一下,谢谢了!

<!DOCTYPE HTML>

<html>

<head>

<meta  charset="utf-8">

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

<style>

.container{

    height:300px;

background:#ccc;

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

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

}

.middle{

    height:200px;

    background:#acc;

    display:table-cell;/*表格单元显示(比直接用table省去了很多代码,意思跟table一样)*/

    vertical-align:middle;/*垂直居中*/

}

</style>

</head>


<body>

<div class="container">

    <div>

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

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

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

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

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

    </div>

</div>

<!--下面是代码任务区-->

<div class="middle">

    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</body>

</html>

我这个写出来的是并行的,可是看了下面大家写的代码,有一些的答案是并列的所以我很好奇,希望有人能帮我解答下这个问题,感谢!

正在回答

4 回答

可能是窗口大小的问题?

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

慕沐9496964 提问者

本来是回复你的,点错了。。点成回答自己了,回复在楼下。。
2019-06-30 回复 有任何疑惑可以回复我~

div块状元素变成了行内元素:table-cell,加一个br就可以了.

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


外面再包一层div

<div>

<div class="middle">

    <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</div>


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

display:table-cell;是这个代码的问题,好像是说table里面有个td标签 那个标签因为是表格形式所以不会自动换行,然后就会显示在一行里了,目前我就了解了这么多

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

举报

0/150
提交
取消

在这一节我想弄清楚为什么有的代码写出来的答案是并行而有些是并列呢,希望大家知道的帮我解答一下,谢谢了!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信