display:table-cell的使用方法&＃xff0c;前者必须设置在父元素上&＃xff0c;后者必须设置在子元素上&＃xff0c;因此我们要为需要定位的文本再增加一个
元素&＃xff1a;
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
多行文字实现垂直居中
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
现在我们要使这段文字垂直居中显示&＃xff01; Webjx.Com
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
这个方法应该是很理想了&＃xff0c;但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell&＃xff0c;因此这种方法在
Internet Explorer 6及以下的版本中是无效的。嗯&＃xff0c;这让人很郁闷&＃xff01;不过我们还其它的办法
四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中&＃xff0c;在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后&＃xff0c;如果再对子元素
进行百分比计算时&＃xff0c;计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题&＃xff0c;但是使用百分比计算的基础将不再是该元素的
高度&＃xff0c;而从父元素继承来的定位高度)。例如&＃xff0c;我们有下面这样一个(X)HTML代码段&＃xff1a;
如果我们对subwrap进行了绝对定位&＃xff0c;那么content也会继承了这个这个属性&＃xff0c;虽然它不会在页面中马上显示出来&＃xff0c;但是如果再对content进
行相对定位的时候&＃xff0c;你使用的100%分比将不再是content原有的高度。例如&＃xff0c;我们设定了subwrap的position为40%&＃xff0c;我们如果想使content的上
边缘和wrap重合的话就必须设置top:-80%;那么&＃xff0c;如果我们设定subwrap的top:50%的话&＃xff0c;我们必须使用100%才能使content回到原来的位置上去
&＃xff0c;但是如果我们把content也设置50%呢&＃xff1f;那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中&＃xff1a;
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然&＃xff0c;这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解&＃xff0c;我查阅了很多文章&＃xff0c;不知道是因为出
处相同还是什么原因&＃xff0c;似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理&＃xff0c;我也只是了解了一点皮毛&＃xff0c;还要再研究)
多行文字实现垂直居中
body { font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
现在我们要使这段文字垂直居中显示&＃xff01;
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案&＃xff0c;不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器&＃xff0c;你可
以参考这篇“简单CSS hack&＃xff1a;区分IE6、IE7、IE8、Firefox、Opera”&＃xff1a;
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此&＃xff0c;一个完美的居中方案就产生了。
多行文字实现垂直居中
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
现在我们要使这段文字垂直居中显示&＃xff01;
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
p.s. 垂直居中vertical-align的值是middle&＃xff0c;而水平居中align的值是center&＃xff0c;虽然同是居中但关键字不同
京公网安备 11010802041100号