<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 關注
- 1488 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消