元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)

2024-07-11 08:29:05

字体：大中小

来源：转载

供稿：网友

一.层的横向居中

复制代码

代码如下:
<style>
#div1{width:600px; height:600px;}
#div2{width:400px; height:200px;}
</style>
<div id="div1">
<div id="div_2"> div2 </div>
</div>

要让div2在div1中横向居中，解决办法如下：
1.IE中，设置div1的样式：text-align:center; 该方法在IE8以上版本和firefox中仅适用于行内元素居中（display:inline; 和 display:inline-block; 及类似效果的元素以及文本，如 input img 等），子元素中的 div、table 等具有类似 display:block 效果元素将继承这个样式使文本居中 ,但是容器元素本身并不会居中。
2.IE7 以上和 firefox 中，设置div2样式：margin: auto; 仅对具有类似 display:block 效果的元素生效，对 display 为 inline、inline-block 的元素不生效，一般用于 div、table 等位置定位的容器元素， margin 样式 auto 效果是横向居中，并置顶。
3. div2 不能是 position:absolute; 绝对定位将使浏览器无法对元素自动排版，需依赖 left、right 属性，除非明确设定 left:0,right:0;
综合以上：

复制代码

代码如下:
#div1{
*text-align:center; /* ie */
}
#div2{
margin:auto;
display:block;
*display:inline; /* ie */
*zoom:1; /* ie */
}

二.层的垂直居中
1.最常见的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;
css 中的 vertical-align:middle;与表格的 vertical-align 不太一样，该样式作用于 inline-block(或具有类似行内块状效果) 的元素与其父元素内的文本或祖先元素内的文本（如果该祖先元素内的inline-block 元素没有设置 vertical- align 样式）在垂直方向的对齐方式。
vertical-align 无法影响后代元素的内容的对齐方式。
vertical-align 对 block 元素不起作用，因为折行了在垂直方向没有对齐可言。
vertical-align 作用于 inline元素(如 span)时，将决定该元素自身如何对齐于同一行内的 inline-block 元素，无法影响同辈元素或文本的对齐方式。
vertical-align 取值为 text-top text-bottom 时，对齐方式涉及文本的 inline-box 模型，
inline-box 模型的高度由 line-height(可以是继承来的) 决定，分为 content-area、top、bottom几个部分，其中的 content- area 是由文字大小决定，如果过 line-height 很大， font-size 较小，加上背景颜色，我们就看到的背景色区域就是 content-area，
text-top 和 text-bottom 并不是可见的文字的顶端和底端（IE6-8 在渲染 text- top 和text-bottom时，错误地将content-area 的顶端和底端作为对齐的基准）。
具体的解释参考这里：
https://www.Vevb.com/css/70053.html
一个例子，firefo、chrome 与IE 有差别：

上一篇：css3简单练习实现遨游浏览器logo的绘制

下一篇：关于Chrome浏览器字体显示的太小不一的bug处理