方法一：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>页面元素的水平居中</title>

<style type="text/css">

    * { margin:0; padding:0; list-style:none; font-size:14px; font-family:Tahoma, Geneva, sans-serif; }

    .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }

    .clearfix { zoom:1; }

    a{ text-decoration:none;}

    h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}

    /** 包装器，relative */

    .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }

    /** relative left 50% */

    .page { float:left; position:relative; left:50%; }

    /** relative right 50% */

    .page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }

</style>

</head>

<body>

<h1>页面元素的水平居中</h1>

<h2>浮动方式：</h2>

<div class="wrap clearfix">

    <ul class="page">

        <li> <a href="#">上一页</a> </li>

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

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

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

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

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

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

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

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

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

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

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

        <li> <a href="#">下一页</a> </li>

    </ul>

</div>

</body>

</html>

这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。

方法二：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>页面元素的水平居中</title>

<style type="text/css">

    * { margin:0; padding:0; list-style:none; font-size:14px; }

    .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }

    .clearfix { zoom:1; }

    a{ text-decoration:none;}

    h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}

    .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }

    .inwrap{ float:left; position:relative; left:50%;}

    .page { float:left; position:relative; left:-50%; }

    .page li { float:left;margin:0 5px;  }

    .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}

</style>

</head>

<body>

<h1>页面元素的水平居中</h1>

<h2>浮动方式：</h2>

<div class="wrap clearfix">

    <div class="inwrap">

        <ul class="page">

            <li> <a href="#">上一页</a> </li>

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

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

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

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

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

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

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

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

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

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

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

            <li> <a href="#">下一页</a> </li>

        </ul>

    </div>

</div>

</body>

</html>

这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG。举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。

CSS浮动元素的水平居中的更多相关文章

  1. 用CSS 实现 浮动元素的 水平居中

    问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...

  2. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  3. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  5. 【转】css浮动元素的知识

    原文: http://www.cnblogs.com/xuyao100/p/8940958.html ------------------------------------------------- ...

  6. 纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...

  7. css浮动的元素居中

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. css浮动

    一.浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”. 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边 ...

  9. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

随机推荐

  1. 从m个数中取top n

    将题目具体一点,例如,从100个数中取出从大到小排前10的数 方法1:使用快速排序 因为快速排序一趟下来,小于K的数都在K的前面,大于K的数都在K的后面 如果,小于K的数有35个,大于K的数有64个 ...

  2. eCos系统CPU负载测量

    原文:http://ecos.sourceware.org/docs-latest/ref/services-cpuload.html 译文:http://blog.csdn.net/zoomdy/a ...

  3. 20169210《Linux内核原理与分析》第二周作业

    <Linux内核原理与分析>第二周作业 本周作业分为两部分:第一部分为观看学习视频并完成实验楼实验一:第二部分为看<Linux内核设计与实现>1.2.18章并安装配置内核. 第 ...

  4. java中main函数解析（转载）

    从写java至今,写的最多的可能就是主函数 public static void main(String[] args) {} 但是以前一直都没有问自己,为什么要这么写,因为在c语言中就没有这样子的要 ...

  5. [Redux] Refactoring the Entry Point

    We will learn how to better separate the code in the entry point to prepare it for adding the router ...

  6. Nubia Z5S(高通公司MSM8974) QHSUSB_BULK砖的方法节省模式(随着win7在恢复recovery分区案例)

    Nubia Z5S在某些异常情况或按组合键进入QHSUSB_BULK状态, 这种模式的现象, 猜想windows(实例win7)即使在数据线, 它会出现在计算机n载,甚至会提示要格式化某些分区(这里要 ...

  7. Android 颜色渲染(五) LinearGradient线性渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染 相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...

  8. Android 颜色渲染(一) 颜色选择器 ColorPickerDialog剖析

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色选择器之ColorPickerDialog剖析 有这样一个需求,可以让用户自定义背景颜色,这就需要提供一个颜色选择器给用户. ...

  9. 学习Oracle应该准备的技能

    首先数据库方面的技能:数据库体系结构.基本概念和基本理论.数据库管理.备份.恢复.SQL开发.PLSQL开发.工具的使用等等. 操作系统方面的技能:对Linux/Unix系统应该有相当的基础.理解RA ...

  10. MySQL 错误日志(Error Log)

    同大多数关系型数据库一样,日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件.通常包括错误日志文件,二进制日志,通用日志,慢查询日志,等等. 这些日志能够帮助我们定位mysqld ...