利用vertical-align:middle垂直居中
阿新 • • 發佈：2019-01-05
1.方法一，利用空的span實現圖片居中
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width:400px; height:400px; background:orange; text-align: center; } img{ max-width:100%; display: inline-block;//非必要 vertical-align: middle; } .j1{ display: inline-block;//必要,不然height不能設定 width: 0; height: 100%; vertical-align: middle; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <div> <img src='./00_24.jpg'> <span class="j1"></span> <span>456</span> </div> </body> </html>
在盒子裡給一個空的span，
.j1{
display: inline-block;//必要,不然height不能設定
width: 0;
height: 100%;
vertical-align: middle;
}
此方法可相容ie8，（flex只能相容ie9以上，不包括ie9）
2.利用display：table-cell實現
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <style type="text/css"> .j1{ width:400px; height:400px; background:orange; text-align: center; display: table-cell; vertical-align: middle; } img{ max-width:100%; vertical-align: middle; } span{ vertical-align: middle } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <div class="j1"> <img src='./00_24.jpg'> <span>456</span> </div> </body> </html>
參考來自 https://www.jianshu.com/p/dea069fecb62
img和span的vertical：middle都設定了。就能互相對齊居中。 連結中的寫著，若img寫了vertical-align: middle；而span沒有寫，那麼span就相對於img的基線
所以引申，當span，和img都設定vertical-align：middle即可。所以類推出方法1
方法1中雖然span的widht為0；但是height為100%；它們同時設vertical-aligin：middlle。即img可根據span的基線對齊，又因為span佔height：100%。那麼img就相對於父容器居中