css3 - img垂直水平居中問題
問題描述
.box {width: 300px;height: 300px;display: table-cell;text-align: center;vertical-align: middle;border: solid 1px red;transition: 1s; } .box img {width: 150px;height: 150px; } .box:hover img {transform: scale(2); }
<p class='box'><img src='http://www.piao2010.com/img/1.jpg'/></p>
img垂直水平居中為什么會有一像素的空隙：
問題解答
回答1：方法1. 給img加display:block樣式方法2. 給.box加font-size:0樣式
回答2：https://jsfiddle.net/06m9orbL/
那一點空隙是基線來的，結合你的display:table-cell的屬性來看，那個是基線的一半，因為.box的中心會跟里面的匿名行框中心對齊。
可以看看w3c關于display:table和vertical-align的說明 https://www.w3.org/TR/CSS22/tables.html#height-layout
回答3：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ 這篇文章是極好的
回答4：這個跟vertical-align：middle無關，而是跟你的display:table-cell有關，至于原理我也未清楚，不過你在image 中float:left就可以解決空隙
回答5：img行內塊級元素的原因，父元素設font-size:0；可解決。還有其他幾種解決辦法，可以搜一下，手機打字不方便提供傳送門
回答6：嗯，樓上的哥們說的都對了，我也遇到過。。。圖片中的兔子好可愛，哈哈！
回答7：網上有專門討論這個的，一般解決是設父元素的font-size:0，好像記得是因為字體的“底線”位置吧。設為0那就不受影響了。同樣的文字居中也不是完全居中的，和它的“底線”位置有關。
回答8：https://segmentfault.com/q/1010000004076322/a-1020000004078865
回答9：采用通配符*
*{ margin:0; padding:0;}回答10：
方法有給box設置font-size:0;給IMG標簽設置display:block;或者使用負margin.或者寫flaot.因為元素浮動后也就是display:bolck了
相關文章：
1. docker安裝后出現Cannot connect to the Docker daemon.2. 為什么我ping不通我的docker容器呢？？？3. android - webview 自定義加載進度條4. mysql - 怎么讓 SELECT 1+null 等于 15. javascript - 微信音樂分享6. 網頁爬蟲 - 用Python3的requests庫模擬登陸Bilibili總是提示驗證碼錯誤怎么辦?7. javascript - 微信小程序封裝定位問題（封裝異步并可能多次請求）8. 并發模型 - python將進程池放在裝飾器里為什么不生效也沒報錯9. linux - openSUSE 上,如何使用 QQ?10. python 怎樣用pickle保存類的實例？
網公網安備