圖片在DIV中上下左右居中(水平和垂直都居中)
編輯：CSS詳解
SS布局實例，這個例子相信很實用，讓一個圖片在Div容器中上下、左右都居中，也就是水平和垂直都居中，有用吧，平時遇到的機率挺高的，下面結合CSS和Html來實現這個演示，請參見代碼：
1
<style type="text/CSS">
2
div{ border:1px solid #ccc; height:500px; width:500px; text-align:center; margin:0 auto; background:#ccc;}
3
img{ vertical-align:middle; }
4
div span{ height:100%; width:0; overflow:hidden; display:inline-block; vertical-align:middle; }
5
</style>
6
<div class="test">
7
<img src="icon.png"><span> </span>
8
</div>
測試效果如下：可看到圖片在Div class內水平和垂直居中：
- 上一頁:CSS讓ul所有的li居中顯示的方法
- 下一頁:應用ul、li實現表格形式
小編推薦
熱門推薦