css如何让浮动元素水平居中


Posted in Javascript onAugust 07, 2015

对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家。

方法一:

1、HTML 部分:

<div class="box">
 <p>我是浮动的</p>
 <p>我也是居中的</p>
</div>

2、CSS 部分:

.box{
 float:left;
 position:relative;
 left:50%;
}
p{
 float:left;
 position:relative;
 right:50%;
}

这样看来就很简单了吧,父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。如此简单如此神奇。

方法二:

HTML 代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
 .clearfix { zoom:1; }
 .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>
<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>

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。

方法三:

html代码

<!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如何让浮动元素水平居中,后续本网站还会持续更新有关js、jq、css、php、c#等编程方面的知识,敬请关注本站,谢谢。

Javascript 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JS的replace方法介绍
2012/10/20 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python解释执行原理分析
2014/08/22 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python如何判断数独是否合法
2016/09/08 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python 制作磁力搜索工具
2021/03/04 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
亲属关系公证书
2014/04/08 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python