脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → css元素水平居中

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

 更新时间：2015年08月07日 15:25:53   投稿：mrr  
css中对于定宽的非浮动元素用margin:0 auto进行水平居中，对于不定宽的浮动元素也有一个常用技巧，这篇文章就给大家介绍下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#等编程方面的知识，敬请关注本站，谢谢。

您可能感兴趣的文章:

相关文章

  • JavaScript ESLint插件保姆级使用教程

    JavaScript ESLint插件保姆级使用教程

    ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
    2022-08-08
  • 基于JavaScript实现图片裁剪功能

    基于JavaScript实现图片裁剪功能

    在前端开发中，当遇到图片或头像上传等功能时，有尺寸分辨率限制的话，就需要用到图片的裁剪功能。本文为大家介绍了JavaScript实现图片裁剪功能的示例代码，希望对大家有所帮助
    2023-02-02
  • 简单了解JavaScript arguement原理及作用

    简单了解JavaScript arguement原理及作用

    这篇文章主要介绍了简单了解JavaScript arguement原理及作用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JavaScript运动框架 多值运动(四)

    JavaScript运动框架 多值运动(四)

    这篇文章主要为大家详细介绍了JavaScript运动框架第四部分，多值运动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS运动框架之分享侧边栏动画实例

    JS运动框架之分享侧边栏动画实例

    这篇文章主要介绍了JS运动框架之分享侧边栏动画,实例分析了javascript操作div及css的技巧,需要的朋友可以参考下
    2015-03-03
  • 深入理解在JS中通过四种设置事件处理程序的方法

    深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式
    2017-03-03
  • swiper 自动图片无限轮播实现代码

    swiper 自动图片无限轮播实现代码

    今天移动端正好需要图片触摸滑动效果实现代码，基于swiper实现,需要的朋友可以参考下
    2018-05-05
  • 微信小程序转化为uni-app项目的方法示例

    微信小程序转化为uni-app项目的方法示例

    这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 基于JS实现EOS隐藏错误提示层代码

    基于JS实现EOS隐藏错误提示层代码

    本文给大家分享一段代码基于js实现EOS隐藏错误提示层，对eos隐藏提示层的相关知识感兴趣的朋友一起学习吧
    2016-04-04
  • ts中的void和never类型及区别

    ts中的void和never类型及区别

    void类型和never类型都是ts新增的类型，这两者的共同点是都常见用于声明函数的返回值的类型，这里我们把它们两放在一起介绍有助于大家区分，这篇文章主要介绍了ts中的void和never类型及区别,需要的朋友可以参考下
    2023-05-05

最新评论