做网站要付哪些钱,快手流量推广软件免费,企业网站建设成本,怎么让网站绑定域名垂直居中是一个历史悠久的大问题#xff0c;要做到兼容所有浏览器少不了要花点时间#xff0c;网上也流传了很多解决方案#xff0c;但没发现比我现在用的方案更完美#xff0c;至少在我的项目是如此。项目中要用到垂直居中而碰到兼容性问题的#xff0c;一般都是以下几种…垂直居中是一个历史悠久的大问题要做到兼容所有浏览器少不了要花点时间网上也流传了很多解决方案但没发现比我现在用的方案更完美至少在我的项目是如此。项目中要用到垂直居中而碰到兼容性问题的一般都是以下几种情况换行文字垂直居中图片垂直居中以上都是在固定宽高的容器里垂直居中不然的话marginpadding便可实现。解决垂直居中无非就从几个方面入手利用行高等于容器高度模拟表格单元格特性定位布局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...
