标签（空格分隔）： 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. C#中CefSharp的简单使用

    1. 创建32位winform项目 必须指定32位或64位 这里使用32位 2. 下载CefSharp相关文件 3. 复制CefSharp相关文件到项目debug目录并添加引用 https://blo ...

  2. 20164310Exp1 PC平台逆向破解和BOF基础

    1.逆向及Bof基础实践说明        1.1实践目标 实践对象:pwn1的linux可执行文件 实践目的:使程序执行另一个代码(ShellCode) 实践内容: 手工修改可执行文件,改变程序执行 ...

  3. 03-自己封装DateUtil工具类

    package com.utils; import java.text.ParseException; import java.text.SimpleDateFormat; import java.u ...

  4. 极速认识RSS！

    在解释RSS是什么之前,让我先来举个栗子. 大家都能在街道看到许多海报栏.在那里,会贴出各种各样最新的消息,比如哪个系要开讲座了.星期二晚上的电影放什么.二手货转让等 等.只要看一下海报栏,就会对学校 ...

  5. cesium3dtiles位置改变

    cesium偏移3dtiles高度var heightOffset = 20.0; var boundingSphere = tileset.boundingSphere; var cartograp ...

  6. Python threading(多线程)

    threading模块在较低级别thread模块之上构建更高级别的线程接口. 一.threading模块定义了以下函数和对象: threading.active_count() 等同于threadin ...

  7. thingsboard填坑之路

    因为thingsboard都是国外的资料,国内基本没有参考资料.所以,记录下来源码安装当中,遇到的问题. thingsboard官网源码安装连接: https://thingsboard.io/doc ...

  8. java面试题复习（五）

    41.阐述final.finally.finalize的区别 final:修饰符(关键字)有三种用法:如果一个类被声明为final,意味着它不能再派生出新的子类,即不能被继承,因此它和abstract ...

  9. nodeJs 操作Mysql数据库

    nodeJs下操作数据库需要安装npm模块: mysql npm install mysql --save-dev 新建express项目 express --view=ejs 在项目根目录下新建数据 ...

  10. Vue 自定义指令实现权限控制（按钮级）

    在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的sessionStorage进行存储(这里我是拿到权限按钮按钮的标识,英文名称.把他们合成一个字符串存储在 btnPowerString 中 ...