来源：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. 通过SimpleAction显示一个listview

    private void simpleAction1_Execute(object sender, SimpleActionExecuteEventArgs e) { IObjectSpace os ...

  2. 直接运行PowerShell脚本

    以管理员权限运行下面语句:ftype Microsoft.PowerShellScript.1="C:\WINDOWS\system32\windowspowershell\v1.0\pow ...

  3. C# OpenFileDialog和PictrueBox

     string resultFile = ""; OpenFileDialog openFileDialog1 = new OpenFileDialog(); openFile ...

  4. CSS 居中大全【转】

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

  5. webrtc学习(二): audio_device之opensles

    audio_device是webrtc的音频设备模块.  封装了各个平台的音频设备相关的代码 audio device 在android下封装了两套音频代码. 1. 通过jni调用java的media ...

  6. IIS错误日志：Failed to execute request because the App-Domain

    装上IIS和.net2.0框架后,打开ASP.NET站点,出现Server Application Error,出先此问题,一般先看系统的“事件管理器”,于是查看服务器的“事件管理器”中的“应用程序” ...

  7. C语言第七节流程控制

    流程控制 顺序结构:默认的流程结构.按照书写顺序执行每一条语句. 选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码. 循环结构:在给定条件成立的情况下,反复执行某一段代码.     ...

  8. VS2005 命令窗口的使用

    转自:http://www.cnblogs.com/RobotH/archive/2008/05/29/1209856.html 命令”窗口用于直接在 Visual Studio 集成开发环境 (ID ...

  9. wamp修改多站点配置

    本文介绍如果在wamp中修改配置支持多站点. 第1步,修改httpd.conf,增加8080端口的监听 #Listen 12.34.56.78:80Listen 80Listen 8080 第2步,修 ...

  10. git管理工具的使用教程

    Git入门教程 1.   概述     对于软件版本管理工具,为什么要选择Git?      你真正学会使用Git时, 你就会觉得这个问题的回答是非常自然的.然而当真正需要用文字来回答时,却觉得文字好 ...