我們在進行網站建設時經常會遇到這樣的問題，幾個DIV或LI模塊元素要求并排一行顯示后使其整體居中，如以下布局情況：
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
可能很多人會想到以下布局方法：
<ul style="width:100px;text-align:center">
  <li style="float:left;width:10px;"></li>
  <li style="float:left;width:10px;"></li>
  <li style="float:left;width:10px;"></li>
</ul>
但實際效果中，如果LI被定義了float:left后，是無法使并列一行后的LI元素在UL中整體顯示居中的，LI會一個個靠左排列。

那么如何才能讓使用了float:left并排布局后再整體居中呢？目前或許最好的辦法還是使用display:inline替代float:left，如下：
<ul style="width:100px;text-align:center">
  <li style="display:inline;padding:5px;margin:5px;"></li>
  <li style="display:inline;padding:5px;margin:5px;"></li>
  <li style="display:inline;padding:5px;margin:5px;"></li>
</ul>
但這樣使用后缺點就是無法定義LI的寬度，只能使用padding跟margin來協(xié)調處理顯示間距效果。

你有什么更好的辦法讓使用float:left并排布局后的模塊元素整體居中嗎？

本文原創(chuàng)：廣州網站建設，地址：http://www.studstu.com/news/1048.html，轉摘請保留版權信息。

2014/11/19 網站建設后臺操作問題總結

2014/11/12 2014天貓雙十一銷售業(yè)績，無線成交耀眼

2014/11/5 服務器Mcrypt.so加密庫支持未安裝解決方法

2014/10/29 網站建設在線調用云編輯器

2014/10/27 淺析獲取網站訪客QQ號碼方法原理

2014/10/24 手機網站建設自適應屏幕大小代碼

2014/10/20 奇億網站建設公司2014官網新版上線公告

2014/10/8 如何保留文本框的輸入格式

2014/9/26 手機網站微網站微商城PC網站如何區(qū)別

2014/9/17 奇億網站制作國慶放假通知

2014/9/9 百度推出直達號服務試水O2O

2014/9/9 英文網站建設外鏈效果對比

2014/8/21 奇億網站建設關于中秋節(jié)放假安排

2014/8/18 企業(yè)網站建設定位原則

2014/8/11 2014網站SEO優(yōu)化報告全球版

2014/7/28 網站建設如何進行國際化定位

2014/7/16 谷歌廣告聯(lián)盟AdWords九月新政策

2014/7/9 為產品使用購物廣告

2014/7/7 網站建設中不可忽視的網站測試工序

2014/6/30 微電商網站建設的幾種類型