0

我使用Chris Coyier 在 CSS-tricks 中建议的方法将一些内容（两种方式）集中在容器元素内。为了兼容性，我使用语义方法而不是:before文章中使用的伪元素。由于某种原因，Firefox（在 v.19 for Mac 上测试）失败了，我不知道正确的修复方法是什么（而 Safari、Opera、IE9 和 Chrome 都以它们应该的方式工作）。

我可以检测浏览器并设置一些条件规则，但如果可能的话，我有兴趣在全球范围内解决这个问题。

如果您想检查不同的浏览器，这是我创建的修改过的小提琴的代码。

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>
4

1 回答 1

3

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

尝试设置font-size: 0元素.block，然后在.centered. 它对我有用 - 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%，以便为空容器留出一些空间element .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/

于 2013-03-18T15:38:09.920 回答