快活林资源网 Design By www.csstdc.com
对于定宽的非浮动元素我们可以在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#等编程方面的知识,敬请关注本站,谢谢。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]