Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/visual-studio-code/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html div和ul内部图标的中心列表_Html_Css - Fatal编程技术网

Html div和ul内部图标的中心列表

Html div和ul内部图标的中心列表,html,css,Html,Css,我有一个分为两行的图标列表,我试图将它们居中,但似乎没有任何效果。下面是我现在为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; margi

我有一个分为两行的图标列表,我试图将它们居中,但似乎没有任何效果。下面是我现在为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>

我知道这可能是一些小的或愚蠢的事情需要解决,我只是觉得我一直在看这个,需要一些新鲜的眼睛。谢谢

嗯,没那么难

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

瞧:

li
元素中删除
float:left
,然后添加
display:inline块


[在html中]

float:center通常不太受支持。:)哈哈,是的,我一直在反复尝试我能想到的一切;)如果将一个容器的宽度设置为text align:center,并且容器内的元素是display:inline而不是浮动的,那么它们应该居中。哇。有浮子:中心?