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

能帮我看看吗,为什么我做出来的连个块状元素是在同一排,块状元素不是应该分排显示吗

.container{

    height:300px;

background:#ccc;

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

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

}

.container2{height:300px;

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

vertical-align:middle}

</style>

</head>


<body>

<div class="container">

    <div>

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

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

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

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

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

    </div>

</div>

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

<div class="container2">

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

</div>



我把小女孩那张图设置成container2,应该没有重复啊


正在回答

6 回答

table-cell:指定对象作为表格单元格。类同于html标签<td>


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

这样写可以实现效果:

css部分:

.nvshenimg{

    height:500px;

    width: 500px;

    background:pink;

    display:table-cell;

    vertical-align:middle;

    text-align: center;//水平居中

}

body部分:

<!--下面是代码任务区-->http://img1.sycdn.imooc.com//56f244db0001587403140327.jpg

<h4>竖直和水平居中代码</h4>

<div class="nvshenimg">

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

</div>


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

display属性改成了table cell之后 就不是块元素了吧

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

我也是这么写的代码,效果跟你一样,不明白为什么会这样,求解答.......

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

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

<div class="container2">

    <div>

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

    </div>

</div>


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

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

<div class="container2">

    </div>

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

    </div>

</div>


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

举报

0/150
提交
取消

能帮我看看吗,为什么我做出来的连个块状元素是在同一排,块状元素不是应该分排显示吗

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号