来源：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. JS阻塞的问题

    常见问题    http://www.zhihu.com/question/23101413   阻塞特性:        JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任 ...

  2. erlang web socket参考。

    出自: http://blog.sina.com.cn/s/blog_96b8a15401010g71.html

  3. flash builder 4.6使用profile（概要分析）调试性能

    最近用调试flex的性能,发现fb自带有性能调试工具profile,折腾好一段时间终于成功用上 环境:flash builder 4.6,myeclipse 10(fb装独立版,再以插件形式绑定到my ...

  4. Codeforces Round #340 (Div. 2) A. Elephant 水题

    A. Elephant 题目连接: http://www.codeforces.com/contest/617/problem/A Descriptionww.co An elephant decid ...

  5. CodeForces 173B Chamber of Secrets spfa

    Chamber of Secrets 题目连接: http://codeforces.com/problemset/problem/173/B Description "The Chambe ...

  6. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  7. OS X 10.9 Mavericks 安装 thrift 0.9.1

    通过Homebrew安装的时候,编译会报错.查了一下资料,原来是10.9系统默认使用的libc++的库,而且移除了C++ 11标准前tr库,所以编译存在问题.且笔者使用的时候,brew安装只支持到0. ...

  8. js json与对象的相互转换

    var str = '{ "name": "cxh", "sex": "man" }'; //JSON字符串:var o ...

  9. J2EE常用包：

    J2EE常用包: java web开发必掌握的javax.servlet : servlet包及支持javax.servlet.http : http请求支持javax.servlet.jsp : 及 ...

  10. Android 在onActivityResult()中设置图片setImageResource(resId) 或者改变view属性，不成功的解决办法

    如果试验过的朋友就会发现,在onActivityResult()中设置这些属性,好像都不工作,虽然我死磕一番还是不知道具体原因,我直接默认它可能就是不能在里面设置,所以就只能在其他地方设置,幸好发现A ...