中心div以匹配徽标/潜在客户

Question

在我的网页上，我有一个居中的徽标/引线以及徽标/引线下方的两个div。我希望根据徽标/主角使div显得居中。

我试图通过使用Twitter Bootstrap的跨度来居中div，但div仍未真正居中。

    <div class="row-fluid marketing">
        <div class="span3"></div>
        <div class="span3 text-glow-hover-with-delay">
            <h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
            <p>
                Guru has undergone an enormous amount of testing
                <br />
                via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
                data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
            </p>
        </div>
        <div class="span4 text-glow-hover-with-delay">
            <h2><i class="icon-book"> </i> Full Documentation</h2>
            <p>
                We provide full-source/full-documentation for our users.
            </p>
        </div>
    </div>

如果您需要更多信息，可以查看网站：http://guru.jire.org

Answer 1

通过将 span4 更改为 span3 （奇数等式规则），然后将div设置为align-center，可以使它们显示为真正居中。完整来源如下。

    <div class="row-fluid marketing">
        <div class="span3"></div>
        <div class="span3 text-glow-hover-with-delay" align="center">
            <h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
            <p>
                Guru has undergone an enormous amount of testing
                <br />
                via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
                data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
            </p>
        </div>
        <div class="span3 text-glow-hover-with-delay" align="center">
            <h2><i class="icon-book"> </i> Full Documentation</h2>
            <p>
                We provide full-source/full-documentation for our users.
            </p>
        </div>
    </div>

Answer 2

以这种方式看待它可能会有所帮助：

div上的边框可以帮助您了解正在发生的事情，对角线会显示真实中心的位置。

如果你给div设置一致的宽度，它们会看起来更加对称和居中，这可能就是你需要的所有东西。