HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）
生活随笔
收集整理的這篇文章主要介紹了
HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景：讓不規整的縮略圖在容器中居中顯示（針對特別長或特別寬的圖）
如下圖場景：
代碼及樣式：
<html> <head><title>百搭屋</title><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><style>.table {display: table;table-layout: fixed;width: 500px;height: 500px;border: 1px solid red;background:#F0F0F0;}.table-cell {display: table-cell;text-align: center;vertical-align: middle;}</style> </head><body><div style="" class="table"><div class="table-cell"><img style="max-width:500px;max-height:500px;" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=1111114400,1524974545&fm=85&s=BF80E901FF975FC60A8DD4D60300E0F0"></div> </div></body> </html>效果圖如下：
?
?
?
總結
以上是生活随笔為你收集整理的HTML页面，图片img在容器DIV中，上下左右居中（实用技能，css的table-cell）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 精心总结了10个matplotlib绘图
- 下一篇： 大数据生态系统的认识