MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » css的水准和垂直居中

css的水准和垂直居中

www.MyException.Cn  网友分享于:2013-02-21  浏览:9次
css的水平和垂直居中

<style>
.box1,.box2{

    width:500px;
    height:500px;
     /*非IE的主流浏览器识别的垂直居中的方法,无需其他即可*/
    display: table-cell;
    vertical-align:middle;
    /* 针对IE的Hack */
    *display: block;
    *font-size: 440px;/*约为高度的0.873,500*0.873 约为440,font-size实际上它设置的是字体中字符框的高度,根据box的告诉设置大约为高度的0.873就恰好在box里垂直居中*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
 

  /*设置水平居中*/
     text-align:center;
    border: 1px solid #eee;
}
.img{
     vertical-align:middle;
}
.text{
        width:20px;
        margin:0px auto;/* 块级元素的居中处理可以使用margin:0px auto,但是要注意需要保证外边的width和里面的块的width都确定,此外关于行级元素不起作用 */
}
.text2{
    width:20px; /*关于行级元素,可以直接使用外面块级或者行级元素的text-align属性即可*/
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</header>


<body>
    <div class="box1">
        <img class="img" src="./themes/qingdao/public/images/login/btns_login.png">
    </div>
    <div class="box2">
        <div class="text">
        你好
        </div>
        <span class="text2">
        你好吗
        </span>
    </div>
</body>
</html>



文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有