DIV居中问题

最新推荐文章于 2021-06-10 15:51:07 发布

kofkyo

最新推荐文章于 2021-06-10 15:51:07 发布

阅读量1.3k

点赞数

分类专栏： web相关文章标签： div table xhtml mozilla border css

web相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

/* from: http://guoxuelin.cn.blog.163.com/blog/static/4917562620093405115780/ */

一、Div层居中

如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义设定时再加上“MARGIN-RIGHT:auto; MARGIN-LEFT:auto;”。

二、Div层里的文字垂直居中

首先要知道css里vertical-align无效，W3C官方对vertical-align做了下面的解释： “ This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”

1、单行文字垂直居中。一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。比如定义了一个60px的高度，但是这个Box中存在很多行，那段文本并不能对齐到中央。如果希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，即保证div高和行高保持一致，作用于一行的vertical-align就可以工作了。

CSS代码：

#div-a{height:60px; line-height:60px;}

XHTML代码：

<div id="div-a">好好先生欢迎您</div>

如果还想让div里的文字水平居中，再加上“text-align:center;”即可；代码如下：

CSS代码：

#div-a{text-align:center; height:60px; line-height:60px;}

XHTML代码：

<div id="div-a">好好先生欢迎您</div>

2、多行文字垂直居中有两种方法。

方法一、建议在div层中嵌套table标签，原因很简单，在div中vertical-align无效，但在table中可以。代码如下：

<table>

在div层中嵌套table标签<br>在div层中嵌套table标签</td></tr>

</table>

方法二、多行文字居中，且容器高度可变时，给出一致的 padding-bottom 和 padding-top 。

.middle-demo-2{

padding-top: 24px;

padding-bottom: 24px;

}

优点：

1. 同时支持块级和内联极元素

2. 支持非文本内容

3. 支持所有浏览器

缺点：

容器不能固定高度

三、Div层里的图片垂直居中。

1、背景图片的方法。

代码如下：body{

BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"。

2、嵌套table标签。代码如下：

3、代码如下：

<!--

* {margin:0;padding:0}

div { width:500px; height:500px; border:1px solid #666; overflow:hidden; position:relative; text-align:center; display:table-cell; vertical-align:middle;}

div p { position:static; +position:absolute; top:50% }

img { position:static; +position:relative; top:-50%;left:-50%; }

--> </style>

4、代码如下：

<style>

.box {

display: table-cell;

vertical-align:middle;

text-align:center;

*display: block;

*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/

*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/