CSS实现垂直居中的5种方法（8）
作者：糖伴西红柿 来源：前端观察 发布时间：2009-03-04 12:53:00
步骤三
最后要做的就是再添加点样式，让页面好看点。从目录开始吧。
#nav ul { list-style:none; padding:0; margin:20px 0 0 0; text-indent:0;} #nav li { padding:0; margin:3px;} #nav li a { display:block; background-color:#e8e8e8; padding:7px; margin:0; text-decoration:none; color:#000; border-bottom:1px solid #bbb; text-align:right;} #nav li a::after { content:'»'; color:#aaa; font-weight:bold; display:inline; float:right; margin:0 2px 0 5px;} #nav li a:hover, #nav li a:focus { background:#f8f8f8; border-bottom-color:#777;} #nav li a:hover::after { margin:0 0 0 7px; color:#f93;} #nav li a:active { padding:8px 7px 6px 7px;}
需要注意的是 #centred 的圆角。 CSS3 中，应该有 border-radius 属性来设定圆角的半径(可参考 CSS3之旅: border-radius(圆角) - 糖伴西红柿)。现在的
流行的浏览器都还不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前缀.
兼容性注意事项
如你所想，IE 是唯一添麻烦的浏览器。
#floater 必须指定宽度，否则在任意版本 IE 中，它都啥也不干
IE 6 中目录被周围太多的空间打断
IE 8 有多余空间(作者遗漏)
更多的想法
利用居中的网页可以做很多有意思的事情。我在重新设计 SWFObject Generator 2.0 (使用 SWFObject2.0 生成代码)使用了这个想法。这里有另外的一个想法。
资料
以下是我参考的一些资料，推荐阅读。
Understanding vertical-align, or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS
糖伴西红柿说：
水平居中经常用，其实垂直居中也很有用的。平时用的最多的应该是方法五了，算是个小技巧吧。
译自:http://blog.themeforest.net/tutorials/vertical-centering-with-css/
0
投稿猜你喜欢
- 如下所示：jsonObject 是个jsonif (key in jsonObject) : print '有'else:
- 前言在日常开发中，客户端上传文件的一般流程是：客户端向服务端发送文件，再由服务端将文件转储到专门的存储服务器或云计算厂商的储存服务（例如阿里
- 我想把存在数据库里的每天24小时来访者数另放到一个Excel文件中去，可以吗？可以，其实就是将数据库里面的内容生成一个Excel文件：toe
MySQL的主键可以是自增的，那么如果在断电重启后新增的值还会延续断电前的自增值吗？自增值默认为1，那么可不可以改变呢？下面就说一下 MyS- 我就废话不多说了，大家还是直接看操作吧~<p>联系电话：<a :href="'tel:' + i
- pytorch中index_select()的用法index_select(input, dim, index)功能:在指定的维度dim上选
- 上边文章中提到win的性能监视器是监控数据库性能必备的工具，接下来我就给大家介绍一些常见的监控指标，其实无非就是磁盘，cpu，内存等硬件的运
- 本文实例为大家分享了python rsync服务器之间文件夹同步的具体代码，供大家参考，具体内容如下About rsync配置两
- 对一个列表list而言，进行排序是很简单的。正序排序（从小到大）用list.sort() 倒序排序（从大到小）用list.sort
- 今天学习Python的时候，需要安装一个第三方库，Python Imaging Library，是Python下面一个非常强大的处理图像的工
- 要实现div的任意拖动，我们不妨分析一下整个过程。 当鼠标点击div时，触发一个事件，让div的位置属性（left，top）随着鼠标位置变化
- 目录I. 前提II. 实例演示1. 硬编码方式2. 基于TransactionProxyFactoryBean方式3. xml使用方式4.
- 四种格式的解析：filelistslicelistdownload.cfgthird_party_download.cfg还是2个文件。替换
- 打包pyinstaller 02.py --noconsole --hidden-import PySide2.QtXml报错0：The &
- 前言Yolov5比较Yolov4,Yolov3等其他识别框架，速度快，代码结构简单，识别效率高，对硬件要求比较低。这篇博客针对Python+
- Varchar 对每个英文(ASCII)字符都占用2个字节，对一个汉字也只占用两个字节char 对英文(ASCII)字符占用1个字节，对一个
- 数据库管理系统中并发控制的任务是确保在多个事务同时存取数据库中同一数据不破坏事务的隔离性和统一性以及数据库的统一性乐观锁和悲观锁式并发控制主
- 表单是让用户与我们的网页应用程序交互的基本元素。Flask 本身并不会帮助我们处理表单，但是 Flask-WTF 扩展让我们在我们的 Fla
- 常用指令agent指令-bind=0.0.0.0 指定consul所在机器的ip地址-http-port 指定web接口服务端口-clien
- 为什么选择Python进行数据分析？Python是一门动态的、面向对象的脚本语言，同时也是一门简约，通俗易懂的编程语言。Python入门简单
