来源：http://www.imooc.com/code/4336

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css代码

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}
</style>

这种水平居中的方法两个条件缺一不可，若是将width:200px；删掉，就不能居中显示了。

html+CSS--水平居中设置（定宽块状元素）的更多相关文章

  1. 定宽块状元素居中 1记（text-align/margin:0 auto）

    对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...

  2. html+css--水平居中总结（不定宽块状元素方法）（一）

    来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度 ...

  3. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  4. html+css--水平居中总结-不定宽块状元素方法（三）

    来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...

  5. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  6. html 设置宽度100% 块状元素往下调解决方法

    css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...

  7. CSS布局 -- 左右定宽，中间自适应

    左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left  margin-right 查看 demo <!DOCTYPE h ...

  8. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  9. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

随机推荐

  1. wikioi 1098 均分纸牌

    题目描述 Description 有 N 堆纸牌,编号分别为 1,2,-, N.每堆上有若干张,但纸牌总数必为 N 的倍数.可以在任一堆上取若于张纸牌,然后移动. 移牌规则为:在编号为 1 堆上取的纸 ...

  2. 新浪微博SSO登陆机制

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  3. MariaDB5.5.32 绿色版下载安装一条龙

    1.下载地址: http://ftp.yz.yamagata-u.ac.jp/pub/dbms/mariadb/mariadb-5.5.32/win32-packages/mariadb-5.5.32 ...

  4. 理解C++ static

    1.为什么设计static?考虑下面的需求: 在程序运行过程中,在一个范围内,有一个对象大家共享,而且可以多次使用,状态能够保持,对象的生命周期一直持续到程序运行结束. 2.静态对象要分配在全局数据区 ...

  5. CodeForces 176C Playing with Superglue 博弈论

    Playing with Superglue 题目连接: http://codeforces.com/problemset/problem/176/C Description Two players ...

  6. Codeforces Gym 100803G Flipping Parentheses 线段树+二分

    Flipping Parentheses 题目连接: http://codeforces.com/gym/100803/attachments Description A string consist ...

  7. MS WORD 表格自己主动调整列宽，自己主动变美丽，依据内容自己主动调整

    在MS WORD中,当有大量的表格出现时,调整每一个表格的的高和宽和大小将是一件很累的事情,拖来拖去,很耗时间,并且当WORD文档达到300页以上时,调整反应很的慢,每次拖拉线后,须要等待一段时间其才 ...

  8. box-flex等分总结

    首先要知道在应用 box-flex 时必须给父容器定义 css 属性 display:box 其子容器才可以进行划分. .box{ display: -webkit-box; display: -mo ...

  9. 剑指 offer set 10 栈的压入、弹出序列

    总结 1. 通过按位对比来判断, 没有更优的方法了

  10. objective-c中使用cocoa的NSPredicate,谓词（十四）

    holydancer原创,如需转载,请在显要位置注明: 转自holydancer的CSDN专栏,原文地址:http://blog.csdn.net/holydancer/article/details ...