在樣式布局中,我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單:對文本,只需要對其父級元素設置text-align: center;,而對div等塊級元素,只需要設置其left和right的margin值為auto。要實現元素的垂直居中,有人會想到css中的vertical-align屬性,但是它只對擁有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。因此我們需要通過別的方法去實現元素的垂直居中,下面我總結了幾種了常用垂直居中方法。
單行文本垂直居中
對于單行文本,我們只需要將文本行高(line-height)和所在區域高度(height)設為一致即可:
新聞熱點
疑難解答