标签（空格分隔）： 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 线上部署

    1.修改Spring Boot 1.添加:spring-boot-maven-plugin 插件 <build> <plugins> <plugin> <gr ...

  2. Optaplanner终于支持多线程并行运行 - Multithreaded incremental solving

    Optaplanner 7.9.0.Final之前,启动引擎开始对一个Problem进行规划的时候,只能是单线程进行的.也就是说,当引擎对每一个possible solution进行分数计算的过程中, ...

  3. UHF RFID，高频RFID开发参考资料

    ISO18000-6C电子标签百科  http://baike.baidu.com/item/ISO18000-6C%E7%94%B5%E5%AD%90%E6%A0%87%E7%AD%BE/80500 ...

  4. Linux系统编程——水平触发和边沿触发

    事件模型 EPOLL事件有两种模型: Edge Triggered (ET) 边缘触发只有数据到来才触发,不管缓存区中是否还有数据. Level Triggered (LT) 水平触发只要有数据都会触 ...

  5. 线程相关的sleep()、yield()、wait()、join()方法介绍

    1.Thread.sleep()与Thread.yield()都会暂缓当前线程执行,转为执行其他线程(忽略优先级),如果持有锁,则不会释放. 2.Thread.sleep()可以精确指定休眠的时间,而 ...

  6. 填坑：Java 中的日期转换

    我们之前讨论过时间,在Java 中有一些方法会出现横线?比如Date 过期方法. 参考文章:知识点:java一些方法会有横线?以Date 过期方法为例 Java中的日期和时间处理方法 Date类(官方 ...

  7. bs4源码

    Beautiful源码: """Beautiful Soup Elixir and Tonic "The Screen-Scraper's Friend&quo ...

  8. vue分页效果

    js部分 <script src="....js/vue.js"></script> <script src="..../js/vue-re ...

  9. java使用jxl,poi解析excel文件

    public interface JavaExcel { /** * 使用jxl写excel文件 */ public void writeJxlExcel(); /** * 使用jxl读excel文件 ...

  10. 【HP-UNIX】修改HP-UNIX主机名称

    原文链接:https://blog.csdn.net/lantianbaiyunbj/article/details/53434537 HP-UX修改主机IP地址 方法一 1.set_parms ho ...