CSS按鈕垂直水平居中

antzone發表於2017-03-03
CSS

本章節介紹一下如何讓一個按鈕在一個div中垂直水平居中。

這樣的要求可能在實際應用中比較少，但是可以作為一種學習知識的臺階。

下面先看程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
.demo{
  width:200px;
  height:200px;
  background:green;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
</style> 
</head>
<body> 
<div class="demo"><input type="button" value="螞蟻部落"/></div>
</body> 
</html>

程式碼可以讓按鈕可以讓按鈕在div中水平垂直居中，下面簡單做一簡單分析。

（1）.text-align:center：

此屬性可以讓按鈕水平居中，因為按鈕並不是一個塊級元素，所以可以用此屬性實現水平居中。

（2）.display:table-cell和vertical-align:middle：

這兩個屬性配合可以實現垂直居中，具體可以參閱display:table-cell的用法簡介一章節。

相關文章