css佈局 對齊
元素居中對齊:可以使用margin:auto;外邊距設定 注意內邊距padding設定無效。
注意這種必須設定width屬性 設定為60%
文字居中對齊 可以使用text-align:center
圖片居中對齊,使用margin:auto,並且是塊元素,所以設定display為block
img { display: block; margin: auto; width: 40%; }
垂直居中的對齊 可以使內部元素對齊。.center { padding: 70px 0; border: 3px solid green; }
。 一個簡單的方式就是頭部頂部使用 padding:
70px 0表示上下都間隔border70px;左右為0
設定line-height和height屬性相同,也可以設定成居中。只適用於單行文字. line-height是指一個行的高度.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 3;
display: inline-block;
vertical-align:middle;
}
也可以使用display:table-cell 將div元素轉換成table-cell的元素,隨後可以使用vertical-align:middle 使內部元素垂直居中,使用text-align:center 使內部元素水平居中.
https://www.cnblogs.com/chen-cong/p/8076442.html
https://www.cnblogs.com/jiangwenli/p/4924172.html
有關的居中方法還需進一步的總結。