行內元素的垂直居中:1. 給塊級元素中的想要居中的行內元素設定: vertical-align: middle
這表示這些行內元素是以它們各自的中間的位置來與其他行內元素對齊的;
若還是沒對齊的話,可通過在這些行內元素的父元素中設定line-height
來調節.
2. 若行內元素的父元素高度不定,可通過設定行內元素的padding: 20px 0;
這樣上下的padding一致就可達到垂直居中.
塊級元素的垂直居中:
1. 若父元素高度不定,那麼可以通過設定padding: 100px 0;
這樣塊級子元素就會在父元素中垂直居中.
2. 使用line-height(父元素高度確定):
- 在父元素中設定line-height為父元素的高度
- 在塊級子元素中設定:
display: inline-block;
vertical-align: middle;
3. 使用絕對定位(父元素高度確定):
步驟: 1. 父元素為position: relative
2. 塊級子元素: position: absolute
top: 50%;
margin-top: -(塊級子元素高度的一半)
若想要設定左右居中的話:
left: 50%;
margin-left: -(塊級子元素寬度的一半)
行內元素和塊級元素的垂直居中，水平居中
一 行內元素 1 行內元素的水平居中 給父級元素使用屬性text align center 2 行內元素的垂直居中 給父級元素使用屬性line hight 父元素盒子的高度 二 塊級元素 1 塊級元素的水平居中 給子級元素使用屬性margin 0 auto 2 行內元素的水平垂直居中，有四種方法 h...
行內元素和塊級元素水平及垂直居中問題
首先，介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。行內元素 不佔據一整行，隨內容而定，有以下特點 不可以設定寬高，也不可以設定行高，其寬度隨著內容增加，高度隨字型大小而改變。內聯元素可以設定外...
塊級 行內元素水平垂直居中方法
塊級元素水平垂直居中 為目標元素設定以下屬性 position absolute top 0 left 0 right 0 bottom 0 margin auto 行內元素水平垂直居中 在目標元素的父元素設定以下屬性 目標父元素內內容水平對齊方式 text align center 此元素會作為乙...