html - 如何在 1140 像素的流体响应框架中将 div 居中？

Question

我正在使用 cssgrid.net，它是一个 12col 1140px 响应式流体框架，但我在居中时遇到了问题。

我的网站有一个“background-size: cover;”图片，我有一个 Logo ，我想在浏览器中水平居中，即使它正在调整大小时也是如此。

这是我的 HTML:

<div class="container">
<div class="row">
    <div class="fourcol"></div>
    <div class="fourcol">
        <div class="logo"></div>
    </div>
    <div class="fourcol last"></div>
</div>

还有 CSS:

.logo {
        background: url(../images/logo_retina.png) no-repeat;
        background-size: 175px 175px;
    }

这是我网站顶部的样子:

Logo 从第二组 4 列开始，但我如何使其在这组 4 列中居中，即使在调整大小时也是如此？

请记住编码只是一种爱好。

Answer 1

假设每个 div.fourcol 具有相同的固定宽度我认为 background: url(../images/logo_retina.png) no-repeat center middle;应该有帮助。如果它们在宽度设置为 auto 的情况下彼此 float ，则会出现问题，因为 div.row 可能比 div.fourcol 的累积宽度更宽。