php excel 垂直居中,完美实现文字图片水平垂直居中
垂直居中是一個(gè)歷史悠久的大問題，要做到兼容所有瀏覽器少不了要花點(diǎn)時(shí)間，網(wǎng)上也流傳了很多解決方案，但沒發(fā)現(xiàn)比我現(xiàn)在用的方案更完美，至少在我的項(xiàng)目是如此。
項(xiàng)目中要用到垂直居中而碰到兼容性問題的，一般都是以下幾種情況：
換行文字垂直居中
圖片垂直居中
以上都是在固定寬高的容器里垂直居中，不然的話margin，padding便可實(shí)現(xiàn)。
解決垂直居中無(wú)非就從幾個(gè)方面入手
利用行高等于容器高度
模擬表格單元格特性
定位布局
css3的display:box
換行文字垂直居中
結(jié)合表格單元格特性和定位來實(shí)現(xiàn)
/* 換行文字垂直居中 */
.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%;
}
換行文字垂直居中，兼容所有瀏覽器當(dāng)文字高度超出容器時(shí)，識(shí)別table-cell的瀏覽器容器會(huì)自適應(yīng)，此時(shí)容器的height屬性相當(dāng)于min-height，為了達(dá)到所有瀏覽器效果一致，容器的height還要Hack一下。
缺點(diǎn)：增加了多余的標(biāo)簽
利用行內(nèi)塊vertical-align:middle來實(shí)現(xiàn)
.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必須是行內(nèi)元素，vc-inner加上vc-fix的寬度不能超過容器寬度，行內(nèi)塊換行時(shí)會(huì)多出空隙(容器font-size: 0可去除，但這里不適用)，所以這兩個(gè)標(biāo)簽不能換行。
缺點(diǎn)：增加了多余的標(biāo)簽(硬傷)，標(biāo)簽不能換行且必須是行內(nèi)元素。
固定寬高圖片垂直居中
前面提到的換行文字垂直居中的方法對(duì)于固定寬高圖片垂直居中也是適用的
利用定位(原理跟方法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;
}
既然已經(jīng)確定了圖片的寬高，毫無(wú)疑問使用這種方法就沒有兼容性的問題出現(xiàn)了
缺點(diǎn)：圖片寬高必須固定，以便計(jì)算圖片margin的負(fù)值。
行高等于容器高度
.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 字體要設(shè)置多大，自個(gè)慢慢調(diào)整*/
*+html .vc-img2 {
font-size: 180px;
}
我以為設(shè)置了行高等于容器高度就完事了，依然還是碰到了問題，IE6不買賬沒效果，IE7也鬧別扭，在標(biāo)簽同一行情況下失效。
這里順便推薦一個(gè)很好用的占位圖網(wǎng)站，好奇的童鞋猛戳鏈接吧 ：)
缺點(diǎn)：感覺這樣寫不爽
圖片自適應(yīng)容器寬高垂直居中
這個(gè)方法很簡(jiǎn)單，就是在方法4的基礎(chǔ)上改一下圖片的寬高改成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 字體要設(shè)置多大，自個(gè)慢慢調(diào)整*/
*+html .vc-img3 {
font-size: 180px;
}
很明顯這是不兼容IE6，要兼容IE6恐怕就要寫JS。對(duì)此，我只想說，讓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...
總結(jié)
以上是生活随笔為你收集整理的php excel 垂直居中,完美实现文字图片水平垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML与cgi post传递与接收,C
- 下一篇： php foreach ,PHP学习之f