1
A
回答
4
您可以通過您的包裝股利display:table:
和你內心的文字DIV display:table-cell
做到這一點。見下面的例子:
HTML:
<div class="wrapper">
<div class="inner">
One Line</br>
Two Line</br>
Three Line</br>
</div>
</div>
CSS:
.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}
.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}
FIDDLE: http://jsfiddle.net/pgwL47oy/1/
2
這是在你的問題中留言已經提到的,但通常的用法display: table-cell;
與vertical-align: middle;
是你所追求的。
的想法是讓父容器顯示爲一個表display: table;
,然後你使用含有這些文本節點跨度或段落元素被賦予上述table-cell
顯示器vertical-align
。
這對我來說很有用,應該值得一試!
Here's a CSS Tricks article that could help you out further
希望幫助! :)
相關問題
- 1. CSS垂直居中文本
- 2. 如何在HTML中使用CSS僅垂直居中文本
- 3. 使用CSS垂直居中使用CSS
- 4. CSS:水平和垂直居中文本?
- 5. 垂直居中CSS Sprite和文本
- 6. 如何在html/css中的圖像旁邊顯示垂直居中文本?
- 7. CSS - 垂直居中
- 8. 如何將多行文本垂直居中(僅適用於chrome)?
- 9. ImageMagick:垂直居中文本?
- 10. 垂直居中文本
- 11. 垂直居中文本
- 12. 垂直居中使用css的圖標旁邊的多行文本
- 13. 如何垂直居中div和文本的第一行
- 14. 如何在不使用顯示的情況下垂直居中文本:table-cell?
- 15. 垂直居中(使用Bootstrap-CSS)
- 16. 垂直居中按鈕使用css
- 17. 我如何垂直居中文本與css
- 18. 行高與填充垂直居中單行文本
- 19. 如何使用CSS將文本垂直居中在LI內的錨點中?
- 20. 如何垂直顯示PDO行結果?
- 21. 如何垂直居中模態?
- 22. 顯示圖像懸停(垂直居中)
- 23. 如何垂直居中一個div的文本,無論文本有多少行
- 24. 如何使用flexbox實現垂直居中文本?
- 25. 垂直顯示列和行
- 26. 如何使用藍圖css垂直排列行(或div)?
- 27. MFC中多行cstatic文本的垂直居中
- 28. 用CSS垂直居中一個元素
- 29. 如何垂直居中div?
- 30. 如何垂直居中div?
右邊的圓圈總是相同的大小? – Dan 2014-09-05 16:50:19
將表格格對待你的div是最好的方法。看看這篇文章:http://css-tricks.com/vertically-center-multi-lined-text/ – APAD1 2014-09-05 16:50:54
哪裏是你的嘗試小提琴/ – 2014-09-05 16:51:27