1. 程式人生 > >css佈局 對齊

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

有關的居中方法還需進一步的總結。