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

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

css firefox

Css 在Firefox中居中元素（水平和垂直）失败,css,firefox,centering,Css,Firefox,Centering,我使用该方法将一些内容（两种方式）集中在容器元素中。为了兼容性，我使用了语义方法，而不是本文中使用的：before伪元素。由于某种原因，Firefox（在Mac版的v.19上测试）失败了，我也不知道正确的修复方法是什么（而Safari、Opera、IE9和Chrome都能正常工作）我可以检测浏览器并放置一些条件规则，但如果可能的话，我有兴趣在全局范围内解决这个问题这是我的代码，如果你想签入不同的浏览器 CSS: .block { text-align: center; bac

我使用该方法将一些内容（两种方式）集中在容器元素中。为了兼容性，我使用了语义方法，而不是本文中使用的

：before

伪元素。由于某种原因，Firefox（在Mac版的v.19上测试）失败了，我也不知道正确的修复方法是什么（而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;
}

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

HTML:

.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;
}

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


一些文本
但他又偷偷地走到我们面前，突然鼓掌
他把手放在我肩上，说道；“你看见什么了吗
看起来像是前段时间有人向那艘船走去？”

布局被破坏，因为

.centered

的宽度是容器宽度的100%，而内联块元素不能很好地处理溢出（它们被推到下一行）

尝试为

.block

元素设置

字体大小：0

，然后在

.centered

中重新定义字体大小（例如16px）。它对我有用-

这里唯一的缺点是，您必须使用像素值来重新声明字体大小-

em

单位（我个人最常用的单位）将不起作用，因为父级的字体大小为0（

em

是一个相对单位，在这种情况下，

em

将引用父字体大小0，任何乘以0的值都是零）

[编辑]：如果您不想使用这种肮脏的攻击，那么您也可以选择确保子容器的宽度，

.centered

不是父容器宽度的100%，这样就为空元素

.content

留下了一些空间，这大致包括：

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

请参阅FIDLE以了解第二个建议-