關於文字垂直居中

2022-02-01 14:12:44 字數 897 閱讀 8142

很多時候布局中需要文字垂直居中,有個css屬性:vertical-align: middle;該屬性在table裡用是有效果的,很多塊級元素沒反應。

這裡有2個屬性可以模擬table,來讓vertical-align: middle屬性生效。

display: table和display: table-cell;
很簡單父級元素給固定寬高加上屬性display: table,子級元素給屬性display: table-cell和vertical-align: middle此時子集元素的文字自然垂直居中。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>display:table

title

>

<

style

>

*.main

.d1.d1 h3

style

>

head

>

<

body

>

<

div

class

="main"

>

<

div

class

="d1"

>

<

h3>垂直居中

h3>

div>

div>

body

>

html

>

關於垂直居中

對垂直居中設定齊父級樣式 vertical align middle display table cell 同時設定 的父級display table 對垂直居中設定齊父級樣式 vertical align middle display table cell 同時設定 的父級display tabl...

關於垂直居中

做專案每次垂直居中的時候都折騰半天,在這邊稍微整理一下垂直居中我所理解的一點知識吧。1,行內元素 行內元素,比如,img,span等直接用vertical align middle,就可以搞定了。2,塊元素 垂直居中,最簡單的方式是height 20px line height 20px 讓他們相等...

div CSS 文字垂直居中

說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才生...