Question

我在这里尝试一个非常简单的过程，基本上试图将客户端徽标集中在这个主客户端div中。我刚刚开始从事这个网页设计业务，虽然我可以阅读其中的一些解决方案，但我很难将它们应用到我的结构中。

基本上我有几个客户端盒子，每个盒子里面都会有一个PNG图像：

            <div id="clients">
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
            </div>

我希望能够将客户端框放在具有固定权重的客户端div上。我尝试过使用 display：inline-block ，但这似乎并不多。我假设那是因为我已经强迫他们浮动：左但我不知道如何在不这样做的情况下保持他们在div中的位置。就像我说的那样我是CSS的新手，这就是我为所有CSS做的事情。

这是我对客户端和客户端CSS的所有内容：

           #clients {
           background-image: url("img/images/clients_bg.png");
           border-bottom: 1px solid #333333;
           border-top: 1px solid #666666;
           float: left;
           margin-top: 120px;
           padding: 10px;
           width: 778px;
           }
           .client-box {
           background: none repeat scroll 0 0 #bcb546;
           float: left;
           font-family: verdana;
           font-size: 11px;
           height: 60px;
           margin-right: 10px;
           opacity: 0.8;
           padding-top: 40px;
           text-align: center;
           width: 100px;
           }
           .client-box:hover {
           opacity: 1;
           }

根据我的理解，这应该不难实现，但到目前为止，我没有任何运气，可能是因为我的大脑注重某种做事方式而且不会让步。任何帮助将不胜感激。

您可以看到实际网站here。

谢谢你。

Answer 1

我尝试过使用display：inline-block 但这似乎并不多。

float: left强制display: block，因此display: inline-block无效。

在.client-box上，您需要：

删除float: left
添加display: inline-block。

最后，在父元素（#clients）上，您需要添加text-align: center。

enter image description here

Answer 2

如果外部div具有固定宽度，则可以设置内部div的边距以占据适当的空间。例如：

<div class="outer">
    <div class="inner">
        stuff
    </div>
</div>

CSS

.outer { width: 600px; }
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }

或者你可以使用margin-left：auto; margin-right：auto;然而（就像世界上其他一切一样）在IE中不起作用。

希望这有帮助！

Answer 3

我将在客户端框中添加一个包装器，其宽度等于客户端盒的总宽度。

例如，在您上面发布的实际网站中，有5个客户端框，每个客户端框的宽度为100px，边距为10px。所以添加一个宽度为5 x（100 +10）= 550px的div包装器，并使用“margin-left：auot”和“margin-right：auto”将包装器居中。

<div style="width: 550px;margin-left: auto; margin-right: auto;">

                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
                <div class="client-box">CLIENT LOGO</div>
</div>

在固定的DIV问题中另一个居中的DIV

3 个答案: