圖片垂直水平居中的N種方法
阿新 • • 發佈:2019-01-24
前幾天在網上逛部落格,看到一個關於在div中圖片居中的幾種方法的帖子,當然博主原意不是講這個的,而是再說明css的幾個display屬性的用法以及偽類:after的巧用過程中展示的用例,當然還有意想不到的font-size屬性的用法,個人覺得非常有用,所以就做了一個總結,在一個div容器中讓圖片水平垂直居中有以下N中方法,當然不限於以下方法(以下方法相容IE系列以及W3C瀏覽器):
<style> *{padding: 0; margin: 0; list-style: none;} /*方案1*/ .bg-box{width: 144px;height: 144px;font-size:118px;border: 1px solid #ddd;float: left;margin-right: 20px;} .bg-box .img-src{background: url(logo.png) no-repeat center center;display: block;width: 100%;height: 100%;} /*方案2*/ .wrap-box{float: left;margin-right: 20px;} .img-box{width: 144px;height: 144px;*font-size:118px;vertical-align:middle;display:table-cell;border: 1px solid #ddd;text-align: center;}/*height:fontSize=1.14*/ .img-box img{vertical-align: middle;} /*方案3*/ .img-box1{width: 144px;height: 144px;font-size:0;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-box1 .pixel{vertical-align: middle;height: 100%;width: 1px;} .img-box1 .img-src{vertical-align: middle;} /*方案4*/ .img-box2{width: 144px;height: 144px;*font-size:118px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-box2:after{content: '';display: inline-block;height: 100%;width: 0;vertical-align: middle;} .img-box2 .img-src{vertical-align: middle;} /*方案5*/ .img-box3{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-divide{width:0;height:100%;display:inline-block;vertical-align:middle;*display:inline;*zoom:1;} .img-box3 .img-src{vertical-align:middle;} </style> </head> <body> <div class="bg-box"> <img src="pixel.png" alt="" class="img-src"> </div> <div class="wrap-box"> <div class="img-box"> <img src="logo.png" alt=""> </div> </div> <div class="img-box1"> <img src="pixel.png" alt="" class="pixel"> <img src="logo.png" alt="" class="img-src"> </div> <div class="img-box2"> <img src="logo.png" alt="" class="img-src"> </div> <div class="img-box3"> <div class="img-divide"></div> <img src="logo.png" class="img-src"> </div> </body>
一下是效果圖:
//無意間又發現一種方法,這裡再補充一下
用line-height就能達到這樣的效果,如下:
.img-box4{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;line-height:144px;}
.img-box4 .img-src{vertical-align:middle;}
說明下,logo.png是效果圖中的圖片,而pixel.png是一張大小隨意的透明圖片,大家可以試試效果!
PS:推薦使用最後一種,省了很多麻煩!