垂直對齊文本

我有問題垂直對齊文本與CSS。我嘗試過所有可能的事情，但它只是不想工作。你可以看到我的演示的jsfiddle演示在這裏：垂直對齊文本

.section { 
    text-align: center; 
    vertical-align: middle; 
    display:table-cell; 
}

有了這個代碼，它應該工作，但什麼是錯的。

我該如何解決這個問題？提前致謝。

編輯：更新演示：http://jsfiddle.net/zcU7M/7/

來源

2013-11-23 Richard Mišenčík

不要回避要求通過把假的代碼使用的jsfiddle鏈接，而不是你應該只張貼代碼。 –

@JoshPowell OKay謝謝。 –

寫：

.section { 
    display: table-cell; 
    vertical-align:middle; 
}

Updated Fiddle.

來源

2013-11-23 17:27:47 Hiral

請檢查我的更新演示：http://jsfiddle.net/zcU7M/7/。我包括bootstraps css和js文件。 IM在本地有相同的問題，而不是文本對齊，但它們都卡在左側。 –

的.section需要display: table-cell

.section { 
    height: 200px; 
    background:#ccc; 
    border-bottom: 1px solid #dcdcdc; 
    text-align: center; 
    vertical-align: middle; 
    display:table-cell; 
}

display:table-cell是允許元素垂直對齊的元素，所以必須在父級上才能讓子元素垂直對齊。

這裏是Working Demo。

來源

2013-11-23 17:30:39

請檢查我的更新演示：http://jsfiddle.net/zcU7M/7/。我包括bootstraps css和js文件。 IM在本地有相同的問題，而不是文本對齊，但它們都卡在左側。 –

@RichardMišenčík：???該演示看起來像正常工作。請解釋更多。我想幫忙。 –

該部分不跨越整個寬度。它的類型卡在左側。 –

問題是，標籤只在底部增加了一些邊距。用螢火蟲檢查時可以看到這一點。只需添加一個保證金：0您.section僞p選擇：

.section p { 
    font-size: 15px; 
    font-family: Arial; 
    font-style: italic; 
    margin: 0; 
}

http://jsfiddle.net/zcU7M/22/

來源

2014-02-05 14:13:19 SuperNova

For a vertical paragraph align use that: 

p { 
     height:200px; 
     line-height:200px; 
     text-align:center; 
     vertical-align: middle; 
    }

的jsfiddle例如：Exemple

來源

2014-02-05 14:20:30 SavinienL

全部歸功於此鏈接所有者@Sebastian埃克斯特羅姆Link，請訪問通過這個。看到它在行動codepen, 通過閱讀上面的文章我也策劃了演示fiddle也。

只需3行CSS（不包括供應商前綴），我們可以藉助transform：translateY垂直居中，不管我們想要什麼，即使我們不知道它的高度。

CSS屬性轉換通常用於旋轉和縮放元素，但是通過translateY函數，我們現在可以垂直對齊元素。通常這必須通過絕對定位或設置線高來完成，但這些要求您要麼知道元素的高度，要麼只能處理單行文本等。

因此，要做到這一點，我們寫：

.element { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
}

這就是你需要的。這是一種類似於絕對位置方法的技術，但有利的一點是，我們不必在父元素或位置屬性上設置任何高度。即使在IE9中，它也可以直接使用！

爲了使它更加簡單，我們可以把它寫成與其供應商前綴一個mixin：

來源

2014-08-11 11:39:40 ankitd

垂直對齊文本

回答

相關問題