标签（空格分隔）： 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. PhpStorm 2018 破解方法

    破解方法如下: 1.修改phpstrom的验证服务器地址. 在C:\Windows\System32\drivers\etc目录下打开hosts文件,并在文件最后加入 0.0.0.0 account. ...

  2. vue 中 相同的路由不会跳转，更改路由的办法

    vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...

  3. Windows自定义运行命令

    1 打开注册表regedit 2 找到:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths 3 新增项,自己运 ...

  4. HTTP请求的502、504、499错误

    1.名词解释 502 Bad Gateway:作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应(伪响应). 504 Gateway Time-out:作为网关或者代理工作的服务 ...

  5. Asp.NET 简易通用WebServices 附件服务

    [toc] 总述: 用了很久的附件分离服务, .NET 2.0平台开始使用.  配置好服务后, 由调用端定义并管理目录级次.  调用端存储目录即可.  附件服务: 相应配置节点放入 web.confi ...

  6. Scrapy CrawlSpider源码分析

    crawl.py中主要包含两个类: 1. CrawlSpider 2. Rule link_extractor:传LinkExtractor实例对象 callback:传”func_name“ cb_ ...

  7. 关于shiro安全框架实现同一用户同一时刻仅可在一个地址登录的技术实现

    首先,我们要说明一下,本技术点的开发背景是shiro与springMvc结合环境下的开发方式. 由于shiro把用户登录后的信息都存在了自己封装的session中,所以要实现单一地址登录,我们需要关注 ...

  8. 在Windows2008下安装SQL Server 2005无法启动服务的解决办法

    在Windows2012下安装SQL Server 2005无法启动服务的解决办法 1.正常安装任一版本的SQL Server 2005. 2.安装到SqlServer服务的时候提示启动服务失败  此 ...

  9. mysql双机热备的实现

    转:http://blog.csdn.net/qq394829044/article/details/53203645 Mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题.还好 ...

  10. Android 开发 启动activity并且将前面activity全部清空

    方法一: Intent intent = new Intent(A.this,B.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | I ...