Question

我使用方法Chris Coyier suggested in CSS-tricks将一些内容（两种方式）集中在容器元素中。为了兼容性，我使用语义方法而不是文章中使用的:before伪元素。出于某种原因，Firefox（在适用于Mac的v.19上测试）失败了，我无法弄清楚正确的解决方案是什么（而Safari，Opera，IE9和Chrome都按照应有的方式工作）。

我可以检测浏览器并提出一些条件规则，但如果可能的话，我有兴趣全局修复它。

如果你想在不同的浏览器中查看，这是the modified fiddle I created的代码。

CSS：

.block {
    text-align: center;
    background: #c0c0c0;
    margin: 20px 0;
    height: 300px;
}
.content-before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    background: #f5f5f5;
}

HTML：

<div>
    <div class="block">
        <span class="content-before"></span>
        <div class="centered">
            <h1>Some text</h1>
            <p>But he stole up to us again, and suddenly clapping
            his hand on my shoulder, said&mdash;"Did ye see anything
            looking like men going towards that ship a while ago?"</p>
        </div>
    </div>
</div>

Answer 1

布局被破坏，因为.centered的宽度是容器宽度的100％，并且内联块元素不能很好地处理溢出（并且它们被推到下一行）。

尝试为font-size: 0元素设置.block，然后在.centered中重新声明字体大小（例如，16px）。它对我有用 - http://jsfiddle.net/teddyrised/hJtpF/4986/

.block {
    font-size: 0;
    /* Rest of the styles here */
}
.centered {
    font-size: 16px;
    /* Rest of the styles here */
}

这里唯一的缺点就是你必须使用像素值来重新声明字体大小 - em单位（我个人最常使用）不起作用，因为父级的字体大小为0（ em是一个相对单位，在这种情况下，em将从父字体大小0引用，任何乘以零的都是零。

[编辑]：如果你不想使用这个脏黑客，那么你也可以选择确保子容器.centered的宽度不是父容器宽度的100％，这样空元素.content-before还有一些空间，沿着以下几行：

.centered {
    box-sizing: border-box; /* So that padding is also taken into account */
    width: 90%;
    /* Rest of the styles here */
}

请参阅第二项建议的小提琴 - http://jsfiddle.net/teddyrised/hJtpF/4988/

在Firefox中使元素居中（水平和垂直）失败

1 个答案: