<body>
<!--用display:table-cell 无法实现居中,我看别人能，同样的代码不知道为什么我不行？-->
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
div {
display: table-cell;
width: 400px;
height: 450px;
border: 10px solid deeppink;
text-align: center;
vertical-align: middle;
/*box-sizing: content-box;*/
}
div img {
vertical-align: middle;
border: 0;
}
</style>
<div class="img_wrap">
<img src="laoshi2.png">
</div>
<!--以下用表格能实现垂直居中-->
<style>
table {
border-collapse: collapse;
}
td {
border: 10px solid deeppink;
vertical-align: middle;
width: 400px;
height: 450px;
text-align: center;
}
td img {
vertical-align: middle;
}
</style>
<table>
<tr>
<td><img src="laoshi2.png"></td>
</tr>
</table>
</body>
3 回答
我家在玉堆
TA贡献5条经验 获得超4个赞
事隔多天，再次想到这个问题，自己解决了，代码看起来是没有问题的！只不过是空白字符影响了居中的
<div class="img_wrap"><img src="laoshi2.png"></div>
换成这样写，或者让font-size:0;
- 3 回答
- 0 关注
- 1420 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消