在表格佈局時代,不需要過多的考慮垂直居中的問題,在單元格中,預設就是垂直居中的,一行文字是垂直居中,三行文字同樣也會垂直居中。進行CSS網頁佈局,這樣的形式改變了。文字預設是居於容器頂部。
如下圖所示:
|
在這樣的情況下,如何實現文字垂直居中呢。分為三種情況:
一、如果是單行文本,可以用行距來解決問題。
我們為它增加行距的定義,得到單行文字垂直居中的效果。
|
二、如果是多行文本,父容器不固定高度。
我們可以用padding來解決問題。
設定容器的padding上下為相同的固定值,容器的高度隨著內容的增加而增加。
以此來實現多行文字的垂直居中。
我們致力於為中文網站提供動力! |
|