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

除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>

<div class="container">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

</body>

css代码：

<style>

.container{

    text-align:center;

}

/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    display:inline;

}

/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

    margin-right:8px;

    display:inline;

}

</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

html+css-水平居中-不定款块状元素方法（二）的更多相关文章

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

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

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

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

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

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

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. css布局中关于 块状元素和行内元素的区分

    这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性 ...

  6. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  7. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. css实现不定高度的元素垂直居中问题

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. CSS 水平居中和垂直居中

    1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...

随机推荐

  1. （剑指Offer）面试题35：第一个只出现一次的字符

    题目: 在字符串中找出第一个只出现1次的字符,如输入“abaccdeff”,则输出b. 思路: 1.暴力遍历 从头开始扫描字符串中的每个字符,当访问某个字符时,取该字符与后面的每个字符相比较,如果没有 ...

  2. 初始化css代码需要注意的

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白 ...

  3. 从零开始学C++之虚函数与多态（一）：虚函数表指针、虚析构函数、object slicing与虚函数

    一.多态 多态性是面向对象程序设计的重要特征之一. 多态性是指发出同样的消息被不同类型的对象接收时有可能导致完全不同的行为. 多态的实现: 函数重载 运算符重载 模板 虚函数 (1).静态绑定与动态绑 ...

  4. sc7731 Android 5.1 LCD驱动简明笔记之一

    基于展讯sc7731 - Android 5.1 代码分析浏览.将屏蔽细节,把握整体,并且不涉及其他设备和LCD的交互. 以下对sc7731 lcd大体流程进行简要说明. 第一,lcd 的两个阶段 1 ...

  5. JDBC连接各种数据库的方法（经典）

    1)连接Oracle 8/8i/9i/10g/11g(thin模式) Class.forName("oracle.JDBC.driver.OracleDriver").newIns ...

  6. 在linux下修改oracle的sys和system的密码和用户解锁

    修改oracle的sys和system的密码和用户解锁 1.再linux系统上sqlplus '/as sysdba' 进入sqlplus后就可以修改sys和system的密码了 2.alter us ...

  7. Linux 卸载Oracle 11G

    卸载oracle11G数据 1.使用SQL*PLUS停止数据库[oracle@OracleTest oracle]$ sqlplus /nologSQL> connect / as sysdba ...

  8. maven项目编译漏掉src/main/java下的xml配置文件

    在整合Spring + Mybatis框架的时候,自动扫描配置都已经配置好了. 配置如下: <?xml version="1.0" encoding="UTF-8& ...

  9. 导入word数据

    public static List<FL> ImportDOC(object fileName,out StringBuilder meg)        { List<FL> ...

  10. swift app中展示折线图, 饼状图, 柱状图等数据图表

    github 下载Charts-master SDK,该SDK有多种可自定义的图表样式 lineChart 正弦余弦线图 LineChart (cubic lines) LineChart (grad ...