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

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

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

您可以在此处查看实时网站。

谢谢你。

Answer 1

我尝试过使用 display: inline-block
但这似乎并没有多大作用。

float: left 强制 display: block，因此 display: inline-block 不会产生任何效果。

在 .client-box 上，您需要：

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

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

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;右边距：自动；然而，这（就像世界上其他一切一样）在 IE 中不起作用。

希望这有帮助！

Answer 3

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

例如，在您上面发布的实时站点中，有 5 个客户端框，每个框的宽度为 100 像素，右边距为 10 像素。因此，添加一个宽度为 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>