java图⽚⽂字居中_完美实现⽂字图⽚⽔平垂直居中
⼤神弄的CSS样式还是保存到⾃⼰这⾥看起来舒⼼，嘿嘿
垂直居中是⼀个历史悠久的⼤问题，要做到兼容所有浏览器少不了要花点时间，⽹上也流传了很多解决⽅案，但没发现⽐我现在⽤的⽅案更完美，⾄少在我的项⽬是如此。
项⽬中要⽤到垂直居中⽽碰到兼容性问题的，⼀般都是以下⼏种情况：
css设置文字垂直居中
换⾏⽂字垂直居中
图⽚垂直居中
以上都是在固定宽⾼的容器⾥垂直居中，不然的话margin，padding便可实现。
解决垂直居中⽆⾮就从⼏个⽅⾯⼊⼿
利⽤⾏⾼等于容器⾼度
模拟表格单元格特性
定位布局
css3的display:box
换⾏⽂字垂直居中
⽅法1：结合表格单元格特性和定位来实现
CSS代码：
/*换⾏⽂字垂直居中*/
.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%;}
HTML代码：
换⾏⽂字垂直居中，兼容所有浏览器
PS：当⽂字⾼度超出容器时，识别table-cell的浏览器容器会⾃适应，此时容器的height属性相当于min-height，为了达到所有浏览器效果⼀致，容器的height还要Hack⼀下
缺点：增加了多余的标签
⽅法2：利⽤⾏内块vertical-align:middle来实现
CSS代码：
.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;}
HTML代码：
换⾏⽂字垂直居中，兼容所有浏览器
PS：vc-inner和vc-fix必须是⾏内元素，vc-inner加上vc-fix的宽度不能超过容器宽度，⾏内块换⾏时会多出空隙(容器font-size:0可去除，但这⾥不适⽤)，所以这两个标签不能换⾏
缺点：增加了多余的标签(硬伤)，标签不能换⾏且必须是⾏内元素
⼆、固定宽⾼图⽚垂直居中
前⾯提到的换⾏⽂字垂直居中的⽅法对于固定宽⾼图⽚垂直居中也是适⽤的
⽅法3：利⽤定位(原理跟⽅法1类似)
CSS代码：
.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;}
HTML代码：
PS：既然已经确定了图⽚的宽⾼，毫⽆疑问使⽤这种⽅法就没有兼容性的问题出现了
缺点：图⽚宽⾼必须固定，以便计算图⽚margin的负值
⽅法4：⾏⾼等于容器⾼度
CSS代码：
.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;}
*+html .vc-img2{font-size:180px;}/*hack for ie7 字体要设置多⼤，⾃个慢慢调整*/
HTML代码：
PS：我以为设置了⾏⾼等于容器⾼度就完事了，依然还是碰到了问题，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;}
*+html .vc-img3{font-size:180px;}/*hack for ie7 字体要设置多⼤，⾃个慢慢调整*
PS：很明显这是不兼容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;}
想居中就居中，爽啊！
设置图⽚ 按⽗容器宽度⾃动缩放，并且保持图⽚原本的长宽⽐img{
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。