css如何讓浮動(dòng)元素水平居中
對于定寬的非浮動(dòng)元素我們可以在CSS中用 margin:0 auto 進(jìn)行水平居中,對于不定寬的浮動(dòng)元素我們也有一個(gè)常用的技巧解決它的水平居中問題。解決水平居中問題有很多種方法,下面先給大家分享一下三種方法,希望能幫助到大家。
方法一:
1、HTML 部分:
<div class="box"> <p>我是浮動(dòng)的</p> <p>我也是居中的</p> </div>
2、CSS 部分:
.box{ float:left; position:relative; left:50%; } p{ float:left; position:relative; right:50%; }
這樣看來就很簡單了吧,父元素和子元素同時(shí)左浮動(dòng),然后父元素相對左移動(dòng)50%,再然后子元素相對右移動(dòng)50%,或者子元素相對左移動(dòng)-50%也就可以了。如此簡單如此神奇。
方法二:
HTML 代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>頁面浮動(dòng)元素的水平居中</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>
父元素和子元素同時(shí)左浮動(dòng),然后父元素相對左移動(dòng)50%,再然后子元素相對左移動(dòng)-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>浮動(dòng)方式:</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>
這里也可以多套一層的方式設(shè)置left:-50%,更合理,也可以避免一些不必要的IE BUG。舉一反三,這種float元素居中的方式其實(shí)可以延展應(yīng)用到很多需要浮動(dòng)元素又居中的情況。
以上通過三種方法講解了css如何讓浮動(dòng)元素水平居中,后續(xù)本網(wǎng)站還會(huì)持續(xù)更新有關(guān)js、jq、css、php、c#等編程方面的知識(shí),敬請關(guān)注本站,謝謝。
相關(guān)文章
Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼
本篇文章主要介紹了Three.js獲取鼠標(biāo)點(diǎn)擊的三維坐標(biāo)示例代碼。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)
下面小編就為大家?guī)硪黄@取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無刷新的具體方法
利用ajaxfileupload插件實(shí)現(xiàn)文件上傳無刷新的具體方法,需要的朋友可以參考一下2013-06-06使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載
這篇文章主要介紹了使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載,需要的朋友可以參考下2015-01-01javascript實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽云
JS標(biāo)簽云效果,在鼠標(biāo)的作用下會(huì)自動(dòng)轉(zhuǎn)動(dòng),整體上圍繞成一個(gè)圓形,各個(gè)標(biāo)簽之間無需Div代碼,直接文字+鏈接的形式,有多少就顯示多少,JavaScript會(huì)自動(dòng)調(diào)整顯示數(shù)量,讓視覺效果最佳。2015-10-10JS實(shí)現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時(shí)分秒的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取毫秒值及轉(zhuǎn)換成年月日時(shí)分秒的方法,結(jié)合實(shí)例形式分析了javascript常見的Date()日期時(shí)間獲取、轉(zhuǎn)換相關(guān)操作技巧,需要的朋友可以參考下2018-08-08原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法
這篇文章主要介紹了原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法,無需通過載入jQuery腳本即可實(shí)現(xiàn)圖片的延時(shí)加載效果,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12