css的水平和垂直居中

最新推荐文章于 2024-10-09 22:33:53 发布

iteye_13425

最新推荐文章于 2024-10-09 22:33:53 发布

阅读量102

点赞数

分类专栏： css 文章标签： xhtml

本文链接：https://blog.csdn.net/iteye_13425/article/details/82478002

版权

css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

    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>