Question

I have a list of icons split across two rows and I’m trying to center them but nothing seems to be working. Here’s what I got for my CSS right now:

.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;}

And this is what I have for my 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>

I know it’s probably something small or stupid that needs to be fixed, I just feel like I’ve been looking at this forever and need some fresh eyes. Thanks!

Answer 1

Well, not that hard

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

voilà : http://jsfiddle.net/RWN44/