Question

给出以下CSS：

body {
    font-family: Corbel, Calibri, Verdana, Helvetica, sans-serif;
    font-size: 9pt;'
}
.heb {
    font-family: Bwhebb;
}
.heb, .eng {
    font-size: 25pt;
    cursor: pointer;
    display:none;
}
.slideshow, .cardface, .card {
    width: 100%;
    height: 15%;
    text-align: center;
    position: absolute;
}

以及以下HTML

<div class="card" id="wordID">
    <span class='heb cardface'>
        some word
    </span>
    <br />
    <div class='eng cardface'>
        some translation
        <br />
        <a href='#' class='right' >correct</a> | 
        <a href='#' class='wrong' >incorrect</a>
    </div>            
</div>

我在Chrome和Firefox上获得了两个不同的结果。 Chrome将页面上的所有内容集中在一起，而Firefox将跨度.heb .cardface WAAAAAYYYYYYYYYYYYYYY放在右侧。

我很确定我做错了什么，你能帮我解决一下吗？

Answer 1

如果我从您的CSS中移除position: absolute;，在最后一行，.slideshow, .cardface, .card {width: 100%; height: 15%; text-align: center;}，则全部居中。

Is that what you're after?

Answer 2

你有一个绝对定位的div，带有自动左偏移量。这意味着如果它的位置是静态的，它的左边应该放在它将去的地方....并且由于父元素具有居中文本，这意味着在父元素的中心。如果父元素中有任何文本，Chrome会将此权限设置为正确，但如果父元素仅包含子元素，则会出错。请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=671491

上的测试用例

哦，结果是left: 0应该做你想做的事情，我会假设。

Answer 3

firefox中的问题是<div class="card" id="wordID">处于绝对位置，<span class='heb cardface'>some word</span>也处于绝对位置。

根据@Nightfirecat建议，你可以删除绝对定位。

或者您可以删除.card或.cardface的绝对定位。如果你从.cardface中移除它会更好，从那以后，.card内容将是.cardface内的内容（请记住：将某些内容置于绝对状态会将其移出上下文！Aka，父元素不会用它来定义它的大小/会表现得古怪。）

Firefox（多个版本）将div对齐

3 个答案: