php excel 垂直居中,完美实现文字图片水平垂直居中
垂直居中是一個歷史悠久的大問題，要做到兼容所有瀏覽器少不了要花點時間，網上也流傳了很多解決方案，但沒發現比我現在用的方案更完美，至少在我的項目是如此。
項目中要用到垂直居中而碰到兼容性問題的，一般都是以下幾種情況：
換行文字垂直居中
圖片垂直居中
以上都是在固定寬高的容器里垂直居中，不然的話margin，padding便可實現。
解決垂直居中無非就從幾個方面入手
利用行高等于容器高度
模擬表格單元格特性
定位布局
css3的display:box
換行文字垂直居中
結合表格單元格特性和定位來實現
/* 換行文字垂直居中 */
.vc-font1 {
border: 1px solid black;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* 兼容IE6、7 */
*+html .vc-font1 {
height: auto;
min-height: 200px;
}
.vc-font1 .vc-fix {
*position: relative;
*top: 50%;
*left: 50%;
*width: 100%;
}
.vc-font1 .vc-inner {
*position: relative;
*top: -50%;
*left: -50%;
}
換行文字垂直居中，兼容所有瀏覽器當文字高度超出容器時，識別table-cell的瀏覽器容器會自適應，此時容器的height屬性相當于min-height，為了達到所有瀏覽器效果一致，容器的height還要Hack一下。
缺點：增加了多余的標簽
利用行內塊vertical-align:middle來實現
.vc-font2 {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
overflow: hidden;
}
.vc-font2 .vc-inner {
display: inline-block;
vertical-align: middle;
}
.vc-font2 .vc-fix {
display: inline-block;
width: 0;
height: 100%;
line-height: 100%;
vertical-align: middle;
visibility: hidden;
}
換行文字垂直居中，兼容所有瀏覽器
vc-inner和vc-fix必須是行內元素，vc-inner加上vc-fix的寬度不能超過容器寬度，行內塊換行時會多出空隙(容器font-size: 0可去除，但這里不適用)，所以這兩個標簽不能換行。
缺點：增加了多余的標簽(硬傷)，標簽不能換行且必須是行內元素。
固定寬高圖片垂直居中
前面提到的換行文字垂直居中的方法對于固定寬高圖片垂直居中也是適用的
利用定位(原理跟方法1類似)
.vc-img1 {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
}
.vc-img1 img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
既然已經確定了圖片的寬高，毫無疑問使用這種方法就沒有兼容性的問題出現了
缺點：圖片寬高必須固定，以便計算圖片margin的負值。
行高等于容器高度
.vc-img2 {
border: 1px solid black;
width: 200px;
height: 200px;
line-height: 200px;
_font-size: 200px;
text-align: center;
}
.vc-img2 img {
width: 100px;
height: 100px;
vertical-align: middle;
}
/*hack for ie7 字體要設置多大，自個慢慢調整*/
*+html .vc-img2 {
font-size: 180px;
}
我以為設置了行高等于容器高度就完事了，依然還是碰到了問題，IE6不買賬沒效果，IE7也鬧別扭，在標簽同一行情況下失效。
這里順便推薦一個很好用的占位圖網站，好奇的童鞋猛戳鏈接吧 ：)
缺點：感覺這樣寫不爽
圖片自適應容器寬高垂直居中
這個方法很簡單，就是在方法4的基礎上改一下圖片的寬高改成max-width,max-height，代碼如下：
.vc-img3 {
border: 1px solid black;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
.vc-img3 img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
/*hack for ie7 字體要設置多大，自個慢慢調整*/
*+html .vc-img3 {
font-size: 180px;
}
很明顯這是不兼容IE6，要兼容IE6恐怕就要寫JS。對此，我只想說，讓IE6見鬼去吧！
CSS3的display:box
最后給出一種高端大氣上檔次的方法。
.vc-css3 {
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
display: -o-box;
-o-box-align: center;
-o-box-pack: center;
display: -ms-box;
-ms-box-align: center;
-ms-box-pack: center;
display: box;
box-align: center;
box-pack: center;
}
.vc-css3 img {
width: 100px;
height: 100px;
}
想居中就居中，爽啊！
很完美有木有？如果IE能支持的話，又是該死的IE...
總結
以上是生活随笔為你收集整理的php excel 垂直居中,完美实现文字图片水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML与cgi post传递与接收,C
- 下一篇： react 子传参父_react子父传参