标签（空格分隔）： margin居中

margin居中：

如下图的代码查看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

        .a{

            width:780px;

            height:50px;

            background-color: red;

            margin:0px auto;

        }

    </style>

</head>

<body>

        <div class="a"></div>

        <div class="b"></div>

</body>

</html>

文字居中：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

        div{

            width:780px;

            height:50px;

            background-color: red;

            margin:0px auto;

            text-align: center;

        }

        /*水平居中必须有width，必须要明确width，文字水平居中使用text-align:center

        2.只有标准流下的盒子才能使用margin：0auto

        3.当一个盒子浮动了，固定定位了，绝对定位了，margin：0auto不能用了，

        4.margin是居中盒子，不是居中文本*/

    </style>

</head>

<body>

        <div>文字</div>

        <div class="a"></div>

</body>

</html>
  • 总结：

    水平居中必须有width，必须要明确width，文字水平居中使用text-align:center

    2.只有标准流下的盒子才能使用margin：0auto

    3.当一个盒子浮动了，固定定位了，绝对定位了，margin：0auto不能用了，

    4.margin是居中盒子，不是居中文本

margin居中显示的更多相关文章

  1. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  2. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  3. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  4. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  5. 绝对定位的DIV绝对居中显示

    绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...

  6. div（固定宽度和不固定宽度）居中显示的方法总结

    今天我总结一下css实现div居中的方法,有的是固定宽度的,还有的是不固定宽度的. 1.使用自动外边距实现DIV CSS居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的mar ...

  7. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

  8. 单独一个img标签的居中显示

    针对页面当中通过img插入图片的时候,要保证这个图片在页面内容当中居中,一般的做法是在外面套一个div,通过给div加入 {margin:0 auto;} 来控制图片的居中. 那么如果针对后台上传的图 ...

  9. ul中li居中显示的table方法

    废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...

随机推荐

  1. vue 将毫秒转为日期

    12345656546 | parseTime('{y}-{m}-{d} {h}:{i}')

  2. C# .NET MODEL 复制，实体类复制

    -- /// <summary> /// 将T1 实体的参数复制给 T2 ,不能处理多层次 /// </summary> /// <typeparam name=&quo ...

  3. tp框架增删改

    选择一张表: 首先要创建模型: 1 $n = M("account"); 数据库添加数据: 1.使用数组: 1 2 3 1.使用数组 $arr = array("uid& ...

  4. Git常用的操作记录(自用)

    分支常用操作命令 $ git branch -a //查看分支 $ git checkout -b dev origin/master  //切换/创建分支 $ git branch -vv 或 gi ...

  5. DOM 核心

    继承在DOM中的重要性: 1. Node 对象 2. Element 对象 3. Document 对象

  6. 设置mysql远程连接

    https://www.cnblogs.com/linjiqin/p/5270938.html

  7. 快速获取IP地址的各种方法

    调用百度的IP定位API(首先需要去百度开放平台注册申请key值http://lbsyun.baidu.com/apiconsole/key) http://api.map.baidu.com/loc ...

  8. spring boot apollo demo

    controller 监听器,监听配置实时变化 src/main/resources---->META-INF---->app.properties apollo 界面 测试访问 : 实时 ...

  9. 将自己的SpringBoot应用打包发布到Linux下Docker中

    目录 将自己的SpringBoot应用打包发布到Linux下Docker中 1. 环境介绍 2. 开始前的准备 2.1 开启docker远程连接 2.2 新建SpringBoot项目 3. 开始构建我 ...

  10. Eclipse识别不了jsp中的${pageContxt.request.contextPath }

    按计划这周系统学下Struts,但是搭完框架后jsp页面识别不了${pageContxt.request.contextPath } So这篇就记录一下我是怎么解决这个问题的 不管是tomcat7.0 ...