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

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

举例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>不定宽块状元素水平居中</title>

<style>

.container{

    float:left;

    position:relative;

    left:50%

}

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    position:relative;

    left:-50%;

}

.container li{float:left;display:inline;margin-right:8px;}

/*下面是代码任务区*/

.wrap{

    clear:both;

    float:left;

    position:relative;

    left:50%;

}

.wrap-center{

    background:#ccc;

    position:relative;

    margin:0;

    left:-50%;

}

</style>

</head>

<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>

<!--下面是代码任务区-->

<div class="wrap">

    <div class="wrap-center">我们来学习一下这种方法。</div>

</div>

</body>

</html>

结果如下图：

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

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

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

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

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

  3. html+css-水平居中-不定款块状元素方法（二）

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

  4. html+CSS--水平居中设置（定宽块状元素）

    来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...

  5. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  6. CSS 技巧一则 -- 不定宽溢出文本适配滚动

    在日常布局当中,肯定经常会遇到文本内容超过容器的情况.非常常见的一种解决方案是超出省略. 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下 ...

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

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

  8. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  9. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

随机推荐

  1. vector中的erase方法[转+补充]

    注释如下: iterator erase(iterator it);       // 删除指定元素,并返回删除元素后一个元素的位置(如果无元素,返回end())iterator erase(iter ...

  2. js中有关滑动问题的一些理解

    在做导航栏的时候,肯定会用到点击滑动的,但不知道大家有没有遇到过这种问题: $(window).animate({ scrollTop: "1000px" }) $(documen ...

  3. 32.怎样在Swift中实现TabBar和导航视图结合的项目？

    导航栏和TabBar结合的项目,在我们平常开发中会经常看到,下面我们通过自定义的TabBar来实现一个导航和TabBar结合的Demo. 1.自定义TabBar import UIKit class ...

  4. javaWeb学习笔记

    一.          web.xml -------------------------------------------------------------------------------- ...

  5. Java字面常量与常量池

    Java中的字面常量(区别于final创建的有名常量)通常会保存在常量池中,常量池可以理解为像堆一样的内存区域.但是常量池有一个特性就是,如果常量池中已存在该常量将不会再次为该常量开辟内存 还是看个程 ...

  6. oracle存储过程实例

    oracle存储过程实例 分类: 数据(仓)库及处理 2010-05-03 17:15 1055人阅读 评论(2)收藏 举报 认识存储过程和函数 存储过程和函数也是一种PL/SQL块,是存入数据库的P ...

  7. Fitness training

    2014-01-14 第一次跑步,结束后大腿酸. 2014-01-15 第二次跑步,跑的过程中臀部酸痛,结束后大腿酸痛. 已经进行跑步8次了,后6次,每次3000米 2014-02-06  plank ...

  8. 窗口界面编程之一：VB实现简单异形窗口

    一.运行效果图(在Win8里的运行效果,在XP里运行就不能体现出来,因为我使用的XP的界面效果) 二.编译环境:Visual Basic 6.0 (SP6) 三.实现原理:通过区域合并 四.使用API ...

  9. memached+asp.net 4.0 分布式缓存

    由于准备做一个商品站点,希望做一个memached缓存.折腾了一个多星期.本机是存进去取出来为空. 各种办法都试过了,还是不行.最后用同事电脑測试是能够的,然后将DEMO公布到阿里云也是能够的.支持. ...

  10. scala命令

    1. intersect方法找出两个字符串的相同字符: scala> "Hello".intersect("World") res3: String = ...