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

对于定宽的非浮动元素我们可以在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#等编程方面的知识，敬请关注本站，谢谢。

赞 (0)

相关推荐

  • 完美实现浮动元素横排居中显示

    经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看. 首先看html代码: <div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul&g

  • 闭合浮动元素超级简单的方法

    无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了. 关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素. 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁.现在我看到有个方法超级简单.赶紧介绍一下.原文在:http://annevankesteren.nl/2005/03/clearing-floats 原理是这样的,外围元素之所

  • 用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

    首先这个元素position为fixed top为(clientHeight-elem.offsetHeight)/2(即元素在浏览器的中间,这个是固定的) left为(clientWidht-主体宽度)/2+主体宽度+左边距,左边距可以设为正数,也可以为负数,如果为负数时的绝对值 等于 主体宽度+elem.offsetWidht,那么元素就刚好浮动在页面主体的左边,设置为0时,刚好浮动在页面主体的右边 但是万恶的ie6不支持css中fixed属性,好在ie6可以通过expresion表达式来解

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

    对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助到大家. 方法一: 1.HTML 部分: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> 2.CSS 部分: .box{ float:left;

  • CSS图片响应式 垂直水平居中

    CSS图片响应式 垂直水平居中

    我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • jquery+css实现移动端元素拖动排序

    jquery+css实现移动端元素拖动排序

    本文实例为大家分享了jquery+css实现移动端元素拖动排序的具体代码,供大家参考,具体内容如下 1.近期需要实现一个选项进行拖动排序的页面,页面如下: 2.JSP页面代码: ​<body>     <div class="main">         <div id="drag-div" class="drag-div">             <div class="others&quo

  • 元素水平居中方案全集

    先来看我一个简单XHTML/HTML文件代码(部分),我们的目的是让#container水平居中. <body> <div?id="container"> <h1>content</h1> <p>Lorem?ipsum?dolor?sit?amet,?consectetuer?adipiscing?elit.Phasellus?varius?eleifend.</p></div></body>

  • jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

    jQuery的css方法统一了两种写法,直接使用float属性即可,如下css方法中传参数"float"即可以设置也可以获取元素的float. 复制代码 代码如下: <div id="d1">float div</div> <script type="text/javascript"> $('#d1').css('float', 'right'); var str = $('#d1').css('float')

  • CSS清除浮动常用方法小结

    常用的清除浮动的方法有以下三种.      此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b

随机推荐