中心列表中的div和ul圖標

我有一個圖標列表分割兩行，我試圖集中它們，但似乎沒有任何工作。這就是我得到了我的CSS現在：中心列表中的div和ul圖標

.overview {width:49%; margin-bottom: 10px;} 
.latest {width:100%; margin-bottom: 10px;} 
.home {width: 100%; overflow: hidden;} 
.leftside {text-align:center;} 
.homebox {width: 100%; float: center; margin-bottom: 10px; background: #fff; overflow: hidden;} 
.homebox2 {width: 100%; float: center; margin-bottom: 10px; background: #fff; overflow: hidden;} 
.header {background: #6c6c6c; color: #FFF; border-bottom: 1px solid #6c6c6c; padding: 5px; font-size: 14px; font-weight: bold;} 
.inside {background: #FCFCFC; border: 1px solid #6c6c6c; padding: 10px; height: 100%;} 
.dashboard-heading {background: #146091;} 

#icons {float: center; list-style: none; margin:0; padding:0;} 
#icons a {text-decoration: none;} 
#icons li {float: left; width: 100px; height: 100px; border:1px solid #ccc; margin: 0 7px 7px 0;} 
#icons li:hover {border:1px solid #aaa; background: #ddd;} 
#icons li img {padding: 8px 18px 2px 18px; align: center;} 
#icons li h6 {color: #333; font-size:12px; text-align: center; margin:0; padding:0;} 

#icons2 {float: center; list-style: none; margin:0; padding:0;} 
#icons2 a {text-decoration: none;} 
#icons2 li {float: left; width: 100px; height: 100px; border:1px solid #ccc; margin: 0 7px 7px 0;} 
#icons2 li:hover {border:1px solid #aaa; background: #ddd;} 
#icons2 li img {padding: 8px 18px 2px 18px; align: center;} 
#icons2 li h6 {color: #333; font-size:12px; text-align: center; margin:0; padding:0;}

而這就是我有我的HTML：

<div class="leftside"> 
     <div class="homebox"> 
     <ul id="icons"> 
      <li> 
       <a href="<?php echo $product; ?>"> 
        <img src="view/image/icons/product.png"> 
        <h6><?php echo $text_product; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $category; ?>"> 
        <img src="view/image/icons/category.png"> 
        <h6><?php echo $text_category; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $manufacturer; ?>"> 
        <img src="view/image/icons/manufacturer.png"> 
        <h6><?php echo $text_manufacturer; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $banner; ?>"> 
        <img src="view/image/icons/banner.png"> 
        <h6><?php echo $text_banner; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $attributes; ?>"> 
        <img src="view/image/icons/attributes.png"> 
        <h6><?php echo $text_attributes; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $featured; ?>"> 
        <img src="view/image/icons/featured.png"> 
        <h6><?php echo $text_featured; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $options2; ?>"> 
        <img src="view/image/icons/options.png"> 
        <h6><?php echo $text_options; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $vouchers; ?>"> 
        <img src="view/image/icons/voucher.png"> 
        <h6><?php echo $text_vouchers; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $module; ?>"> 
        <img src="view/image/icons/module.png"> 
        <h6><?php echo $text_module; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $shipping; ?>"> 
        <img src="view/image/icons/shipping.png"> 
        <h6><?php echo $text_shipping; ?></h6> 
       </a> 
      </li> 
      </ul></div> 
      <div class="homebox2"> 
      <ul id="icons2"> 
      <li> 
       <a href="<?php echo $payment; ?>"> 
        <img src="view/image/icons/payment.png"> 
        <h6><?php echo $text_payment; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $information; ?>"> 
        <img src="view/image/icons/info.png"> 
        <h6><?php echo $text_information; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $order; ?>"> 
        <img src="view/image/icons/order.png"> 
        <h6><?php echo $text_order; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $customer; ?>"> 
        <img src="view/image/icons/clients.png"> 
        <h6><?php echo $text_customer; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $coupon; ?>"> 
        <img src="view/image/icons/coupon.png"> 
        <h6><?php echo $text_coupon; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $review; ?>"> 
        <img src="view/image/icons/comment.png"> 
        <h6><?php echo $text_review; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $settings; ?>"> 
        <img src="view/image/icons/settings.png"> 
        <h6><?php echo $text_settings; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $mailshots; ?>"> 
        <img src="view/image/icons/mailshots.png"> 
        <h6><?php echo $text_mailshots; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a href="<?php echo $backup; ?>"> 
        <img src="view/image/icons/backup.png"> 
        <h6><?php echo $text_backup; ?></h6> 
       </a> 
      </li> 
      <li> 
       <a target="_blank" href="<?php echo $help; ?>"> 
        <img src="view/image/icons/help.png"> 
        <h6><?php echo $text_help; ?></h6> 
       </a> 
      </li> 
     </ul> 
     </div> 

    </div>

我知道這可能是一些小的或愚蠢的，需要加以固定的，我只是感覺就像我一直在看這個，並且需要一些新鮮的眼睛。謝謝！

來源

2013-01-24 Tryin2Code

浮動：中心一般不太支持。 :) –

大聲笑是啊，我剛剛來回嘗試我能想到的一切;） – Tryin2Code

如果你設置一個容器的寬度爲text-align：center，並且容器中的元素顯示爲：inline而不是漂浮，他們應該居中。 –

嘛，不就是硬

ul#icons{text-align:center} 
#icons li{display:inline-block; 
/*remove 'float:left'}

瞧：http://jsfiddle.net/RWN44/

來源

2013-01-24 19:23:19

工作完美！謝謝！ – Tryin2Code

哇。有浮動：中心？ – ovod

從li元素刪除float:left，並添加display:inline-block

[jsFiddle與HTML]

來源

2013-01-24 19:24:18 Roy

中心列表中的div和ul圖標

回答

相關問題