inline block中居中元素

2021-08-22 02:57:19 字數 484 閱讀 6118

luo

有這樣乙個父元素,被顯示為inline-block元素,那問題是,如何居中裡面的元素呢?

先看看父元素的樣式:

.a
設定了元素內居中,這個設定只會水平居中,下面進行垂直居中:

.a::before 

.b

注意到了嗎?我們使用的是vertical-align屬性,設定成middle。但是問題來了,僅僅設定成這樣是沒有一點用的,因為vertical-align需要乙個參考的物件,因此在前面插入了一些內容來比較。如果將.b中的display刪掉,效果也是一樣的。

效果:

總的**如下:

luo

參考:

居中元素總結

對於居中乙個元素有很多種方法,同時也分很多種情況 比如水平居中乙個塊級元素 垂直居中乙個浮動元素或者是乙個絕對定位元素等等 下面就分情況進行總結 一 水平居中 1 水平居中乙個塊級元素 為塊級元素新增 margin 0 auto 2 水平居中乙個行級元素 在父級元素中新增 text align ce...

inline block實現元素水平居中

僅inline block屬性是無法讓元素水平居中,他的關鍵之處要在元素的父容器中設定text align的屬性為 center lang en charset utf 8 documenttitle type text css ul ulli style head item1li item2li ...

inline block垂直居中的方法

vetical align的功能是設定行內元素垂直方向上的對齊方式。可能的值 baseline 預設。元素放置在父元素的基線上。sub垂直對齊文字的下標。super 垂直對齊文字的上標 top把元素的頂端與行中最高元素的頂端對齊 text top 把元素的頂端與父元素字型的頂端對齊 middle 把...