`
angowang
  • 浏览: 5134 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

css的居中

    博客分类：
  • css
 
阅读更多

css的居中问题有好几种，第一种是水平居中，其实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>xxx</title>
        <style type="text/css">
            .parent {
                width: 400px;
                height: 400px; 
                background-color: red;
                text-align: center;
            }
            .child {
                width: 200px;
                height: 200px; 
                background-color: blue;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

 第二种是垂直居中，其实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>xxx</title>
        <style type="text/css">
            .parent {
                width: 400px;
                height: 400px; 
                background-color: red;
                position: relative;
            }
            .child {
                background-color: blue;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

 第三种是图片文字垂直居中，其实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>xxx</title>
        <style type="text/css">
            .parent {
                width: 400px;
                height: 400px; 
                background-color: red;
                position: relative;
            }
            .child {
                background-color: blue;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 200px;
                height: 200px;
            }
            img {
            	width: 100px;
            	height: 100px;
            	vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"><img src="Koala.jpg" />character</div>
        </div>
    </body>
</html>

 

分享到：
| html的表单
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics