浮動元素居中顯示
阿新 • • 發佈：2019-01-05
方法一：
html程式碼如下：
css程式碼如下：<span style="font-size:12px;"><span style="white-space:pre"> </span><body> <h1>浮動元素水平居中</h1> <div class="wrap clearfix"> <ul class="page"> <li><a href="">網站建設</a>|</li> <li><a href="">網頁素材</a>|</li> <li><a href="">網頁特效</a>|</li> <li><a href="">設計分享</a>|</li> <li><a href="">建站教程</a>|</li> <li><a href="">網站模板</a>|</li> <li><a href="">酷站賞析</a></li> </ul> </div> <div class="clear"></div> <p class="end">供學習交流</p> </body></span>
<span style="font-size:12px;"><span style="white-space:pre"> </span><style type="text/css" > body{ margin:0 auto; padding:0; lisy-style:none; font-size:14px; font-family:Tahoma, Geneva, sans-serif; border:4px solid black; text-align:center; } a{ text-decoration:none; } <span style="color:#990000;"><strong>.clearfix:after{/*這樣只能清除子元素的浮動，不能清除自身的浮動*/ content:""; height:0; visibility:hidden; display:block; } .clearfix{ zoom:1; }/*不加這一句也可以清除子元素的浮動*/</strong></span> h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0; } .wrap{ position:relative; margin:20px auto; text-align:center;/*這兩句在這裡不能讓li居中顯示*/ padding:10px 0; background:orange; overflow:hidden; } .page{ /*text-align:center;這一句放在這裡不能讓元素居中顯示*/ float:left; position:relative; <span style="color:#cc0000;"><strong>left:50%;/*這一句放在這裡讓元素居中顯示*/</strong></span> } .page li{ float:left; position:relative; <span style="color:#cc0000;"><strong>right:50%;/*加上這一句再配合上面的left:50% li元素才能真正的居中顯示*/</strong></span> overflow:hidden; margin:0 5px; } </style></span>
總結：這裡主要用到position:relative配合left:50%的技巧，相容各瀏覽器，需要注意的是IE7下需要設定overflow:hidden;來解決無法設定子元素寬度的BUG。
注意，只有清楚li元素的浮動後，“供學習交流”才能居中顯示。
方法二：
html程式碼如下：
<span style="font-size:12px;"><span style="white-space:pre"> </span><body> <h1>浮動元素水平居中</h1> <div class="wrap clearfix"> <strong><span style="color:#990000;"><div class="inwrap"></span></strong> <ul class="page"> <li><a href="">網站建設</a>|</li> <li><a href="">網頁素材</a>|</li> <li><a href="">網頁特效</a>|</li> <li><a href="">設計分享</a>|</li> <li><a href="">建站教程</a>|</li> <li><a href="">網站模板</a>|</li> <li><a href="">酷站賞析</a></li> </ul> </div> </div> <p class="end">供學習交流</p> </body></span>
css程式碼如下：
<span style="font-size:12px;"><span style="white-space:pre"> </span><style type="text/css" >
body{
margin:0 auto;
padding:0;
lisy-style:none;
font-size:14px;
font-family:Tahoma, Geneva, sans-serif;
border:4px solid black;
text-align:center;
}
a{
text-decoration:none;
}
.clearfix:after{/*這樣只能清除子元素的浮動，不能清除自身的浮動*/
content:"";
height:0;
visibility:hidden;
display:block;
}
.clearfix{
zoom:1;
}/*不加這一句也可以清除子元素的浮動*/
h1{
text-align:center;
padding:10px;
font-size:20px;
margin:30px 0;
}
.wrap{
position:relative;
margin:20px auto;
text-align:center;/*這兩句在這裡不能讓li居中顯示*/
padding:10px 0;
background:orange;
overflow:hidden;
}
.inwrap{
float:left;
position:relative;
<span style="color:#cc0000;"><strong>left:50%;</strong></span>
}
.page{
/*text-align:center;這一句放在這裡不能讓元素居中顯示，對於text-align屬性，需要進一步學習*/
float:left;
position:relative;
<strong><span style="color:#cc0000;">left:-50%;</span></strong>
list-style:none;
}
.page li{
float:left;
margin:0 5px;
}
.page li a{
float:left;
display:block;
}
</style></span>顯示的結果圖如下：
