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

| 我在这里尝试一个非常简单的过程，基本上是在此主要客户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;
           }

根据我的理解，这应该不难实现，但是到目前为止，我还没有碰到任何运气，可能是因为我的大脑专注于某种特定的做事方式，而且不会动摇。任何帮助将不胜感激。您可以在此处查看实时站点。谢谢你这么。

已邀请:

3 个回复

补蹲农界维

我尝试使用display：inline-block 但这似乎并没有太大作用。 float: leftdisplay: block，所以so4ѭ无效。在.client-box，您需要：删除float: left 加display: inline-block。最后，在父元素（#clients）上，需要添加text-align: center。

提孺局缎

如果外部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中不起作用。希望这可以帮助！

诫商

我将在客户端盒中添加一个包装，该包装器的宽度等于客户端盒的总宽度。例如，在上面发布的实时网站中，有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 个回复

发起人

centering

css

html

问题状态

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

与内容相关的链接

3 个回复

发起人

centering

css

html

问题状态