0

2 つの行に分割されたアイコンのリストがあり、それらを中央に配置しようとしていますが、何も機能していないようです。これが私が今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>

私はそれがおそらく修正が必要な小さなものか愚かなものであることを知っています. ありがとう!

4

2 に答える 2

1

まあ、そんなに難しくない

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

出来上がり:http://jsfiddle.net/RWN44/

于 2013-01-24T19:23:19.840 に答える
1

要素から削除float:leftしてli追加するdisplay:inline-block

[あなたのhtmlでjsFiddle ]

于 2013-01-24T19:24:18.833 に答える