请问如何实现 图片垂直居中？我查了挺多资料的，但是发现并没有居中
<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>
我家在玉堆浏览 1546回答 3
3回答
-
MarlboroKay
样式看了没问题，你的浏览器是ie8+么。 -
我家在玉堆
事隔多天，再次想到这个问题，自己解决了，代码看起来是没有问题的！只不过是空白字符影响了居中的<div class="img_wrap"><img src="laoshi2.png"></div>换成这样写，或者让font-size:0;
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5