zoukankan html css js c++ java

浮动元素的水平居中

对于页面上的块级元素，只须定宽及设置margin:0 auto;即可在水平上居中，但对于浮动的元素水平居中是无效的，一个典型的应用就是页面的分页效果了

分页效果，在以往可能会采取设置inline-block，然后父容器设置text-align:center方式来实现内容居中，像如下代码：

<!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;}
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
.page2{ text-align:center;}
.page2 a{ display:inline-block;padding:2px 9px; background:white; border:1px solid red; vertical-align:middle;}
</style>
</head>
<body>
<h1>页面元素的水平居中</h1>
<h2>inline-block方式：</h2>
<div class="wrap page2">
    <a href="#">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">下一页</a>
</div>
</body>
</html>

这种设置inline-block的缺点是，元素需要设置vertical-align:middle，并且ie下不能完美对齐，以及元素间有空白符等。。
所以可以考虑用float方式代替inline-block，优点是float的元素盒模型好控制，无空白符等等。
代码如下：

<!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;}
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
.page { float:left; position:relative; left:50%; }
.page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }
.page li a { display:block; padding:2px 9px; background:white; border:1px solid red; }
.page2{ text-align:center;}
.page2 a{ display:inline-block;padding:2px 9px; background:white; border:1px solid red; vertical-align:middle;}
</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>
<h2>inline-block方式：</h2>
<div class="wrap page2">
    <a href="#">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">下一页</a>
</div>
</body>
</html>

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

这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE 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>

查看全文

相关阅读:
Python 线程（三）：Condition(条件变量)
Python 线程（二）：简单锁实现线程同步
 Python 线程（一）：创建线程
 Python 正则表达式
 Python List 、元组、字典操作
 Python 特殊函数（filter, map, reduce等）
(一) log4cpp的安装
 (六) 字符和字符串
 (五) 使用DLL函数
 (四) 自定义函数

原文地址：https://www.cnblogs.com/huanlei/p/2842246.html