如何實現多行文字垂直居中

2021-07-25 02:45:49 字數 865 閱讀 1597

css中的vertical-align屬性只會對擁有valign特性的(x)html標籤起作用,但是在css中還有乙個display屬性能夠模擬,所以我們可以使用這個屬性來讓模擬就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必須設定在父元素上,後者必須設定在子元素上;

附效果圖:

html**:

<

tableclass="way_list">

<

tr>

<

td>

***x

td>

<

td>

******************************************

td>

<

td>+5

td>

tr>

table>

css**:

.way_list.way_listtr

.way_listtr td

多行文字垂直居中

單行文字垂直居中比較簡單,只需將 line height 屬性值與其父元素的 height 屬性值設為相等即可。如下所示 class text 這是第一段文字span class text 這是第二段文字span class text 這是第三段文字span class text 這是第四段文字sp...

CSS多行文字垂直居中

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

CSS多行文字垂直居中

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