码迷,mamicode.com
首页 > 其他好文 > 详细

水平居中

时间:2016-10-28 19:52:13      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:back   one   font   doctype   add   line   .com   body   tom   

方案一

位置 属性名 意义
父div text-align center 让子元素居中
子div display inline-block 可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
子div text-align left 让子元素中的文字不继承父div 的  text-align:center属性, 设置为默认的text-align:left
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中--方案一</title>
    <style type="text/css">
    /*优点:兼容IE低版本浏览器*/
    .parent{ text-align: center; }
    .child{display: inline-block;
            text-align: left;}
    </style>
</head>
<body>
    <div class="parent" style="width: 400px;height: 100px;background: red;">
        <div class="child" style="width: 80px;height: 100px;background: green;">
            <h1>DEMO</h1>
        </div>
    </div>
</body>
</html>

 

技术分享

 

方案二

位置 属性名 意义
       
       
       

水平居中

标签:back   one   font   doctype   add   line   .com   body   tom   

原文地址:http://www.cnblogs.com/qq-757617012/p/6008900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!