来源：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. libev笔记

    libev是一个开源库,实现了一个reactor模式事件驱动任务调度库.代码非常精简,包含所有实现的.c文件只有不到5000行. 支持的事件类型: ev_io ev_timer ev_periodic ...

  2. HITAG 1/2/S

    HITAG S -- 3rd generation HITAG™ family Modulation Read/Write Device to Transponder: 100 % ASK and B ...

  3. 六、Linux/UNIX操作命令积累【kill、netstat、df、du】

    在使用Linux/UNIX下,常常会使用文本界面去设置系统或操作系统,作者本人在工作的过程也在不断接触这方面的命令,所以为此特酝酿.准备.開始了本文的编写. 本文主要记录自己平时遇到的一些Linux/ ...

  4. GLSL-几何着色器详解跟实例（GS：Geometry Shader）[转]

    [OpenGL4.0]GLSL-几何着色器详解和实例(GS:Geometry Shader) 一.什么是几何着色器(GS:Geometry Shader) Input Assembler(IA)从顶点 ...

  5. mysql中自己定义函数编程

    语法: 新建: Create function function_name(參数列表)returns返回值类型 函数体 函数名,应该合法的标识符,而且不应该与已有的keyword冲突. 一个函数应该属 ...

  6. 当调用List Remove 失效时 [C#] .

    有没有试过从一个集合里面移除一个对象之后,这个集合仍然留有这个对象?世界之大,无奇不有.稍有疏忽,便会导致这种奇怪的现象.现在让我们看看这个“不死”对象究竟是怎么一回事. 1.“不死”对象现身 这个问 ...

  7. oc-17-description

    Book.h #import <Foundation/Foundation.h> @interface Book : NSObject { NSString *_bookName; // ...

  8. SignalR的简单实现

    1创建mvc的空项目 2添加文件夹Counters放在里面的类用于封装性能计数器 3创建PerfCounterWrapper类用于封装性能计数器的实体 using System; using Syst ...

  9. android studio无法更新之解决方案

    当发现android studio有更新时,当然第一时间就想更新,可惜被墙了. 解决方案: 下载wallproxy,百度你懂的 在proxy.ini中最上面,找到ip和port 接着,在android ...

  10. tachyon with spark

    spark1.2.0  tachyon0.5.0 jdk1.7 scala2.10.4 1.装好spark.tachyon.jdk.scala 2.修改spark-env.sh添加Tachyon客户端 ...