我有一个分为两行的图标列表,我试图将它们居中,但似乎没有任何效果。这就是我现在为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>
我知道这可能是小事或愚蠢的事需要修复,我只是觉得我一直在看这个,需要一些新鲜的眼睛。谢谢!
答案 0 :(得分:1)
嗯,不是那么难
ul#icons{text-align:center}
#icons li{display:inline-block;
/*remove 'float:left'}
答案 1 :(得分:1)
从float:left
元素中移除li
,然后添加display:inline-block
[jsFiddle与您的HTML]