ie下margin不垂直居中的3种处理方式

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

一切正常状况下必须将div垂直居中显示信息时,应用Css款式:margin:0 auto便可,但有时应用margin:0 auto后在FF、Chrome里能垂直居中,而在IE678里不垂直居中的状况。

以下编码:

拷贝编码
编码以下:

<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 內容垂直居中显示信息</div>

处理方式1
能够是对网页页面行为主体<body>申明文字垂直居中,即body{text-align:center}
即:

拷贝编码
编码以下:

<style type="text/css">
body{text-align:center}
#con{width:980px;martin:0 auto;}
</style>
<div id="con">margin: 0 auto 內容垂直居中显示信息</div>

处理方式2
实际上调解决方式1类似,只是在要垂直居中的div外层加上多1个div,并使其垂直居中
即:

拷贝编码
编码以下:

<style type="text/css">
#con{width:980px;martin:0 auto;}
</style>
<div style=“text-align:center”><div id="con">margin: 0 auto 內容垂直居中显示信息</div></div>

处理方式3
出現这个状况的缘故在于文本文档的DTD申明;
改动DTD为

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">