CSS多行文字垂直居中

2021-09-20 14:43:22 字數 1385 閱讀 3416

今天需要將文字垂直居中,就是一行是垂直居中,多行也是垂直居中。

效果如下

實現**(同事提供)

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

.listdiv

.listdivleft

.listdivleft span

.listdivright

.listdivright img

style

>

head

>

<

body

>

<

div

class

="listdiv"

>

<

div

class

="listdivleft"

>

<

span

>我是一條很長很長的文字,不信你看,哎呦,還是真是,玩不了叻。

span

>

div>

<

div

class

="listdivright"

>

<

img

src=""

/>

div>

div>

<

div

class

="listdiv"

>

<

div

class

="listdivleft"

>

<

span

>我就只一行,沒有了。

span

>

div>

<

div

class

="listdivright"

>

<

img

src=""

/>

div>

div>

body

>

html

>

演示位址

CSS多行文字垂直居中

今天需要將文字垂直居中,就是一行是垂直居中,多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...

css布局 多行文字垂直居中

場景 父元素 高度固定,如何使其中的文字垂直居中?方法一 測試文字測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 結果截圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看,這是為了設定div...

css布局 多行文字垂直居中

方法一 1789 測試文字測試文字 10 1112 測試文字 測試文字 測試文字 測試文字 測試文字 測試文字 13結果圖 關鍵樣式 父元素 這裡是div 設定和高度一致的 line height 這裡是200px 由後面的vertical align定義看,這是為了設定div的基線 子元素 這裡是...