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基础知识filter()和find()实例说明
Jul 06 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 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
Protoss热键控制
2020/03/14 星际争霸
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
理解JS绑定事件
2016/01/19 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
Python获取系统默认字符编码的方法
2015/06/04 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技