跨浏览器实现float:center，No CSS hacks
作者：macji 来源：麦鸡的博客 发布时间：2008-08-22 12:59:00
我们都知道float:left和float:right，但是否想过float:center呢？居中浮动。。。
<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我们希望实现li是浮动的，并且居中的（li个数不固定，ul宽度未知）。可以设置ul的text-align:center,再设置li的display，可以实现居中，但这样不是我们的初衷，我们需要实现float:center。
这里我们得先重温一下position:relative，它将依据left，right，top，bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50％，然后再让li像左浮动，在让它position:relative;right:50％（或者left:-50％），那么li就像向中间浮动一样居中了。废话不多说，先试试。
#macji{
position:relative;
width:100％;
height:80px;
background-color:#eee;
text-align:center;
overflow:hidden;
}
#macji .macji-skin{
float:left;
position:relative;
left:50％;
}
#macji .macji-skin li{
position:relative;
right:50％;
float:left;
margin:10px;
padding:0 10px;
border:solid 1px #000;
line-height:60px;
}
演示地址：
float-center.htm
0
投稿猜你喜欢
- Golang 性能基准测试Golang 中的性能基准测试是使用标准库 testing 来实现的，编写性能测试代码是很容易的：创建性能测试文件
Go令牌Go程序包括各种令牌和令牌可以是一个关键字，一个标识符，常量，字符串文字或符号。例如，下面的Go语句由六个令牌：fmt.Printl- 工具版本python版本：3.8 django版本：2.0.0 mysql版本： 5.5.53 pip3创建工程djangostartDja
- python的百分号输出比较奇怪，代码如下print('％s％％'％(5))#这样就能输出‘5％'来源：https:
- 视频教程教学地址：https://www.bilibili.com/video/BV18441117Hd?p=10x01路由from fla
- 本文实例讲述了利用PHP函数计算中英文字符串长度的方法。分享给大家供大家参考。具体实现方法如下：一般来说大家知道英文字符占一个字节,而中文字
- 如何在VS2013下对MySQL5.6进行连接，本文为大家提供了解决方案，供大家参考，具体内容如下环境：win832系统，VS2013，My
- 最近需要用python打包一个单页面网页demo，于是准备用python包pyinstaller来打包程序。网上搜索了一下，大部分教程都是打
- 装饰器对与Python新手以至于熟悉Python的人都是一个难理解, 难写的东西. 那么今天就分享一下我对Python 装饰器的理解所谓装饰
- 01、Pandas在数据分析师的日常工作中，70％到80％都涉及到理解和清理数据，也就是数据探索和数据挖掘。Pandas主要用于数据分析，这
- 简单的显示记录已经掌握，现在需要的就是通过ASP将信息内容插入到数据库中。一、拥有数据库cnbruce.mdb本数据库的作用就是用来 * 入数
- 创建项目首先打开Pycharm勾选I confirm that I have read and accept the terms of th
- 绘制组合图：组合图就是将多个形状，组合到⼀个图形中，主要作⽤是节约作图的空间，节省读者的时间，从⽽提⾼信息传达的效率。import pand
- 一般来说,pytorch 的Parameter是一个tensor,但是跟通常意义上的tensor有些不一样1) 通常意义上的tensor 仅
- 一、xlsxwriter 基本用法，创建 xlsx 文件并添加数据官方文档：http://xlsxwriter.readthedocs.or
- 前言当我们想要创建一个对象，我们可能使用new方法去构建一个对象，那按道理jquery也是一个对象，应该也是用new jquery()来构建
- 要找到最早的活动事务，可以使用DBCC OPENTRAN命令。详细用法见MSDN:http://msdn.microsoft.com/zh-
- 使用Python进行数据分析，大家都会多少学习一本经典教材《利用Python进行数据分析》，书中作者使用了Ipython的交互环境进行了书中
- laravel-admin后台框架的select选择框的默认选中，结合select2的js插件；文档http://laravel-admin
- 这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不
