您当前的位置:首页 > 前端开发

CSS居中【层水平居中|文字垂直居中】

时间:2013-01-21  来源:零基础编程入门教程网|快速学会网站建设【asp.net容易】  作者:Lynn  点击:

摘要:CSS是前端开发者必学的一门知识,如果按W3C,其实很简单,但由于浏览器版本不同,各类浏览器有所不同,所以都前端开发者来讲,是一个挑战。有很多开发者,喜欢用hack来处理这类问题,本人不建议使用hack处理,只要大家写的CSS是完全符合W3C标准,且是各浏览器都识别的标签,基本上是不存在兼容性问题。今天为大家介绍CSS居中问题的处理:
1、层水平居中、层垂直居中
2、文字水平居中、文字垂直居中
3、图片水平居中、图片垂直居中

支持3lshow.com——asp.net入门教程,asp.net视频教程,asp.net实例教程【asp.net教程网】

    CSS是前端开发者必学的一门知识,如果按W3C,其实很简单,但由于浏览器版本不同,各类浏览器有所不同,所以都前端开发者来讲,是一个挑战。有很多开发者,喜欢用hack来处理这类问题,本人不建议使用hack处理,只要大家写的CSS是完全符合W3C标准,且是各浏览器都识别的标签,基本上是不存在兼容性问题。今天为大家介绍CSS居中问题的处理:
    1、层水平居中、层垂直居中
    2、文字水平居中、文字垂直居中
    3、图片水平居中、图片垂直居中 

    一、层水平居中、层垂直居中

    水平居中,有两种方法(垂直居中的原理也一样):

    法一:margin:0 auto;这种方法与float:left;冲突,有时候会出现一些不太好处理的问题。尤其在您想用body{margin:0 auto;}的时候,我建议您使用法二。测试代码如下:

    <html>

    <head>

    <style>

    div{width:1004px;border:1px solid red;height:500px;margin:0 auto;}

    </style>

    </head>

    <body>

    <div></div>

    </body>

    </html>

    法二:使用绝对定位,巧用左移动:float:left;position:absolute;left:-this.width/2;left:50%;测试代码如下:

     

    <html>

    <head>

    <style>

    *{margin:0;padding:0;}

    html{width:100%;height:100%;background:#666666;float:left;position:relative;}

    body{width:1004px;background:#FFF;border:1px solid #cccccc;position:absolute;float:left;left:50%;margin-left:-502px;}

    div{height:800px;}

    </style>

    </head>

    <body>

    <div></div>

    </body>

    </html>

    二、文字水平居中、文字垂直居中

    文字水平居中:text-align:center;

    文字垂居中中:height:24px;line-height:24px;

    三、图片水平居中、图片垂直居中

    图片水平居中:

    <center>

    <img src='' />

    </center>

    图片垂直居中:

    <div style="height:50px;position:relative;border:1px solid red;width:100px;">
    <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" style="border:1px solid red;height:30px;width:60px;top:50%;position:absolute;left:50%;float:left;margin-left:-30px;margin-top:-15px;">
    </div>

     

     

上一篇:CSS 固定位置广告【不闪|兼容IE6|浮动层】    下一篇:返回列表