DIV居中问题

/* 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>

<tr><td style="vertical-align:middle;height:300px;background-color:ff1fff">

在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标签。代码如下:

  <div   style= "height:300px;background:#DEDEDE; width:60%; ">
<table   height=100%  align=center>
<tr   valign=middle  >
<td> <img   src=http://dotnet.aspx.cc/Images/logoSite.gif   /> </td>
</tr>
</table>
</div>

 

3、代码如下:

 

<style type="text/css">

<!--

* {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>


       <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>

 

 

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编码*/

width:200px;

height:200px;

border: 1px solid #eee; }

.box img {

vertical-align:middle; border:0;}

</style>

<body>

<div class="box">

<a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>
 

</div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值