Firefox中的元素居中（水平和垂直）失敗

我使用方法Chris Coyier suggested in CSS-tricks將一些內容（兩種方式）集中在容器元素中。爲了兼容性，我使用了語義方法，而不是文章中使用的:before僞元素。出於某種原因，Firefox（針對Mac的v.19進行了測試）失敗，我無法弄清楚正確的修復方法（而Safari，Opera，IE9和Chrome都按照他們應該的方式工作）。Firefox中的元素居中（水平和垂直）失敗

我可以檢測瀏覽器並放置一些有條件的規則，但如果可能的話，我有興趣解決這個問題。

這是我的代碼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>

來源

2013-03-18 inhan

佈局被打破，因爲.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/

來源

2013-03-18 15:38:09 Terry

謝謝。不幸的是，字體大小（em）的缺點適用於我的情況。然而，這個骯髒的竅門似乎是最好的辦法，因爲第二個解決方法是在內容的兩側都創建空的空間，當窗口被調整大小時這些空間也會發生變化。 – inhan 2013-03-18 16:03:04

事實上，CSS hacks變得非常混亂，我通常選擇基於JS的方法:)當你已經有jQuery運行時，沒有太多的開銷。 – Terry 2013-03-18 16:09:35

哦，不，我完全忘記了內容的邊距和填充：/ – inhan 2013-03-18 16:22:58

Firefox中的元素居中（水平和垂直）失敗

回答

相關問題