标签（空格分隔）： 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. 通过excel创建表

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. ajax(读取json数据)

    ajax知识点: 语法:$.ajax(路由,请求方式,返回的数据类型,数据参数,回调函数) url: "路由", type:"",默认get请求(get或pos ...

  3. var entsMapLocation = {……}函数

    var entsMapLocation = { global: { $popupCityBox: $(".ents-map-location-popup-box"), isPosi ...

  4. docker 搭建 hustoj

    docker 搭建 hustoj hustoj 是个GPL开源的OJ,其提供了docker形式的安装方式. 为执行方便,选择使用aliyun提供的docker镜像来加速安装. 拉取镜像 docker ...

  5. ESP32 做Web服务器 http Server步骤

    资料不多.多是国外网站的. 百度搜基本出来的是这个网站https://www.dfrobot.com/blog-922.html 出来的代码是: #include <WiFi.h>#inc ...

  6. Memcache,redis，rabbitMQ,SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  7. 初识Velocity

    哇,好长时间没有写文章啦~ 楼主最近在工作中认识了一个叫做Velocity的java的模板引擎,小白的我去网上看了一下,应用还蛮多的,然而我目前接触到的只是用于基于模板生成这块的知识,想写个文章记下, ...

  8. 团队第十次 # scrum meeting

    github 本此会议项目由PM召开,召开时间为4-15日晚上9点,以大家在群里讨论为主 召开时长10分钟 任务表格 袁勤 负责整理实验报告前后端交互,即xml文件传值部分 负责整理实验报告前后端交互 ...

  9. 如何将composer设置为全局变量？

    全局安装是将 Composer 安装到系统环境变量 PATH 所包含的路径下面,然后就能够在命令行窗口中直接执行 composer 命令了. Mac 或 Linux 系统: 打开命令行窗口并执行如下命 ...

  10. Day71Django基础

    Django框架基础一 python中的web框架    a:socket    b:路由跟视图函数匹配关系    c:模板渲染    django:  a: 用了别人的wsgiref   b:自己写 ...