css中vertical align垂直居中的認識

2022-01-16 12:37:29 字數 2663 閱讀 2310

目標大綱

1.vertical-align為何不起作用？？

vertical-align只鍾情於「inline-block內聯塊級元素/inline元素」

vertical-align屬性 text-bottom是與父標籤的文字底部對齊

效果栗子：

我是一段文字.....
2.如何消除下面的間隙是如何出現的？？

源**

1


doctype html


>


2<


html


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>vertical-align


title


>


6<


style


>7* 


11.box 


17.inner-box 


2425


.box_1 


31.box_1 img 


34.box_1 span 


37style


>


38head


>


39<


body


>


40<


div 


class


="box"


>


41<


span 


class


="inner-box"


>


span


>


42這是一段文字內容_vertical-align......


>這是一段文字內容_vertical-align......


span


>


46div


>


47body


>


48html


>
view code

預設情況下vertical-align與一段文字的基線baseline對齊，由於文字存在line-height高度，所以就會出現間隙

3.如何消除下面的空白間隙？？

a.設定vertical-align值，vertical-align: top/middle/bottom;

img
b.讓vertical-align失效，vertical-align 只對「inline-block內聯塊級元素」有效，我們只設定display:block就可以搞定

img
c.設定line-height行高足夠小

div.box_1
d.通過line-height間接控制，font-size字型足夠小

div.box_1
消除下面空白間隙的幾種方法原始碼

1


doctype html


>


2<


html


>


3<


head


>


4<


meta 


charset


="utf-8"


>


5<


title


>消除下面空白間隙的幾種方法（原因vertical-align與line-height導致）


>這是一段文字內容_vertical-align......


span


>


29div


>


30body


>


31html


>
view code

【資料參考】

我對css-vertical-align的一些理解與認識（一）/

CSS 關於css中的border

曾經一直以為html中的border是直角的，直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式，如果這個角相鄰的兩個border乙個有定義而乙個無定義，那麼繪製的結果就是由粗到細的 小尾巴了...

CSS中引入CSS樣式的方法

html宣告標籤 定義和用法 宣告必須是html文件的第一行，位於標籤之前。宣告不是html標籤 他是指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令 在html4.0中，宣告引用dtd，因為html4.01基於sgml。dtd規定了標記語言的則 這樣瀏覽器才能正確的呈現內容。html5不...

css中強制換行

結構 1.transshipment booking system is launched只對英文起作用，以字母作為換行依據 2.transshipment booking system is launched只對英文起作用，以單詞作為換行依據 3.transshipment booking sys...