方法一：

<!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. Shell上传文件到ftp

    写一个shell文件,将给定的文件上传到指定的ftp. 代码如下: #!/bin/bash #用来将文件上传到ftp,输入参数:文件名(包括路径).ftp的IP.ftp的端口.用户名.密码 ip=$ ...

  2. Tomcat绑定多个IP地址 多域名绑定

    http://blog.csdn.net/stevenyanzhi/article/details/6029776 Tomcat绑定多个IP地址 如果一台服务机上有多个IP地址又有多个工程如何一个IP ...

  3. Django中静态文件引用优化

    静态文件引用优化 在html文件中是用django的静态文件路径时,一般会这么写: <script type="text/javascript" src="/sta ...

  4. Spring与Ibatis整合入门

    Ibatis作为一个将java对象与sql中的数据进行映射的工具,可以将一个应用中常用的sql操作抽象为模版,在应用后续与数据库的交互中,将输入sql语句简化为更改一部分参数. ibatis整合到sp ...

  5. 编译LOADCEPC.EXE程序

    1.安装编译工具 安装MSVC152路径C:/MSVC; 安装MASM611可以自己指定E:/MASM611; 命令行编译 相关文件配置 修改setupen2.bat 如下: :PATH_DONE s ...

  6. JQuery ajax调用asp.net的webMethod

    本文章转载:http://www.cnblogs.com/zengxiangzhan/archive/2011/01/16/1936938.html 在vs2010中,用JQuery ajax调用as ...

  7. Android中RelativeLayout的字符水平（垂直居中）对齐

    [背景] 此处Android中显示出来的TextView中的内容,水平中间不对其. 想要实现水平居中对齐. [折腾过程] 1.搜: android RelativeLayout horizontal ...

  8. C# richTextBox 重下往上依次查找关键字

    private void richTextBox1_SelectionChanged(object sender, EventArgs e) {     pos = richTextBox1.Sele ...

  9. 执行游戏时出现0xc000007b错误的解决方法

    如图,这个错误使无数玩家烦恼. 出现这个错误,可能是硬件的问题,也可能是软件的问题.可是,因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件解决此问 ...

  10. css 权威指南笔记（ 五）结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...