CSS浮动元素的水平居中

为什么80%的码农都做不了架构师？>>>

方法一：

<!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元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。

转载于:https://my.oschina.net/hc24/blog/292330

CSS浮动元素的水平居中相关推荐

css中如何居中一个浮动元素,css浮动元素的居中的例子
居中对于大家来说指的是页面了,此时我们通常使用提50%来实现了,下面来看一个css浮动元素的居中的例子,希望例子对各位有用. 关于浮动元素的居中,其实不太常用,但为了应付某些奇葩的面试官,也要知道怎么 ...
CSS浮动元素特点有什么
什么是浮动? 元素的浮动是指设置了浮动属性(flot)的元素. CSS浮动有什么作用? 1.让多个盒子水平排列成一行,浮动成为布局的重要手段; 2.可以实现盒子的左右对齐等等; 3.浮动最早是用来控制 ...
css --- 浮动元素与块框/行内框重叠时的细节
块框,可以认为是块级元素(如div.h1)的内容区 + 内边距行内框可以认为是行内元素(如span)的内容区 + 内边距当块级框/行内框和一个浮动元素重叠时,行内框的边框.背景和内容都在幅度元 ...
关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...
CSS - 浮动元素的margin-left和margin-right
marigin-left和margin-right理解 margin-left:"盒子"元素的左外边距,当属性值增大,元素表现为向右移动,该属性值减少,元素表现为向左移动. mar ...
html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
html 浮动后居中,css如何让浮动元素水平居中
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.解决水平居中问题有很多种方法,下面先给大家分享一下三 ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...

CSS浮动元素的水平居中

CSS浮动元素的水平居中相关推荐

最新文章

热门文章