我有一个分成两行的图标列表,我试图将它们居中,但似乎没有任何效果。这是我现在为我的 CSS 得到的:
.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>
我知道这可能是需要修复的小问题或愚蠢的问题,我只是觉得我一直在看这个问题,需要一些新鲜的眼光。谢谢!