标签（空格分隔）： 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. Spring boot加载REACTIVE源码分析

    一,加载REACTIVE相关自动配置 spring boot通过判断含org.springframework.web.reactive.DispatcherHandler字节文件就确定程序类型是REA ...

  2. 学习python第三天

    变量的命名规范 1.只能有 字母 数字 及_组成 2.不能以数字开头 3.避免与系统关键词重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样做) 4._开头的变量都有特出含义 5 ...

  3. ICE框架双工通讯+MVVM框架测试案例

    准备 开发工具 VS2015 ICE框架 https://zeroc.com/ MVVMLight框架 ICE接口文件 #include "./Identity.ice" #inc ...

  4. Centos7开机启动自己的脚本的方法

    在百度上可以找到好几种Linux开机启动各种服务的方法,在这里我写的是自己喜欢的方式. 博主是一个不怎么记事的人,有些配置在系统的目录下,配置了一次后就忘了,再也不想去系统的目录下找各种奇奇怪怪的目录 ...

  5. 软件推荐----截图软件Snagit

    截图软件,比较推荐使用Snagit,功能上所有截图软件有的他都有.Snagit编辑器有一个[库]功能,可以按日期以及应用程序对截图进行分类整理,最赞的是你可以把整个库备份导出,在新的电脑上进行导入,所 ...

  6. php对函数的引用

    function &example($tmp=0){                  //定义一个函数,别忘了加“&”符     return $tmp;              ...

  7. 软件测试：lab1.Junit and Eclemma

    软件测试:lab1.Junit and Eclemma Task: Install Junit(4.12), Hamcrest(1.3) with Eclipse Install Eclemma wi ...

  8. 让WebStrom支持SSH协议的子项目

    让WebStrom支持SSH协议的子项目 在大项目中, 经常会遇到子项目(submodule)使用ssh的情形, 但是WebStrom不直接支持它. 下面以MAC为例,在PC中的处理类似. 打开ter ...

  9. Linq to SQL -- Join

    Join操作 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), SelectM ...

  10. RN-入门基础

    Props State 一切界面变化,都是state变化 state修改必须通过setState方法 this.state.like=true 这样复制无效 setState是一个merge合并的操作 ...