CSS為什麼行高line height與文字高度height設為一樣大,文字就垂直居中了

2021-05-04 08:59:33 字數 2540 閱讀 1645

1樓:

用p元素輸出一行文字後:

①line-height(行高)=font-size(字元大小)+word-spasing(上下行間距)

例如:行高設定為100px時,若字元大小為30px,那上下行間距就分別為35px;

重點是:字元上行間距和下行間距的大小是相同的。

②如果你知道height是塊級元素的屬性,沒行內元素什麼事,那你對你的問題就不難理解:

試想,一個100px高的div,它的上下padding都設定為35px;中間的content就是30px,此時,它的height(高)=content(內容大小)+padding(上下填充值)。

③結合以①②中的兩個等式:當設定line-height等於height時,字元大小就是內容大小,而上下相同的行間距就相當於上下相同的padding。故,div中的內容居中=p元素的字元(撐滿容器)居中。

「如果此時我把行高調為60px,那麼文字中心點距上或者距下各為30px,那不仍然是垂直居中嗎?」

你想想,你說的「垂直居中」是相對什麼居中?相對於上一行的文字和下一行的文字垂直居中?確實是這樣,但這不是相對包圍他們的容器。

2樓:匿名使用者

line-height行高是包含了文字的高度在內的,而height並非是文字的高度,而是文字所在標籤的高度

行高舉例的話,假如行高設為30px,那麼就是文字中心點距上或者距下各為15px,所以行高與標籤的高度一樣的時候就垂直居中了

3樓:匿名使用者

這是在文字只有一行的時候垂直居中的辦法行高與文字容器同高,此時在效果上看就是垂直居中。多行文字需要用相對定位。

4樓:

line-height是行高

height是容器高

塊級容器裡只有一行的情況下

line-height 等於 height 就是文字垂直居中

如何使文字在div中水平和垂直居中的css**,

水平垂直居中

5樓:匿名使用者

使文字在抄div中水平

和垂直居中的襲的css樣式為

text-align:center; /*水平居中*/line-height: 20px; /*行距設為與div高度一致*/

示例如下:

html元素

水平垂直居中

css樣式

div顯示效果

6樓:匿名使用者

margin:0 auto;//水平居中

自己的height和父元素的lineheight一樣可以垂直居中

7樓:匿名使用者

一個比copy較簡單的方法就是這樣:

你們假bai設你的div是高度100px,寬度du是1000px,那你這樣寫,你的zhi文字就會水平dao垂直居中:

水平垂直居中

css是這樣的,text-align:center意思就是說,讓這個div裡的文字水平居中,而line-height:100px;的意思是說,讓div裡面的每一行文字,佔的高度為100px(和那個div的高度一樣),這樣,文字就垂直居中了。

也就是說,如果你的div是200px高,那你就讓line-height:200px;文字就會垂直居中了。

不知道說明白沒有。不行,你再hi我好了。

8樓:繁華花

div

9樓:談慧

水平垂bai直du

居中zhi

div希望你dao能看版

懂!權!

如何使文字在div中水平和垂直居中的css**

10樓:

可以用「text-align」屬性和「line-height」屬性。

1、新建html檔案,在body標籤中新增div標籤,在div標籤輸入文字,這裡以「演示文字」為例,給div標籤設定寬度、高度和背景色屬性,屬性值分別為200、100和灰色,這時「演示文字」預設位置為div盒子的左上方:

2、這時給div標籤新增上「text-align」屬性,屬性值為「center」,這時文字將會在div容器中水平居中:

3、這時給div標籤新增行高「ling-height」屬性,屬性值為高度的值「100px」,再新增「vertical-align」屬性,屬性值為「middle」,這時文字將會水平垂直都居中:

11樓:藝術流氓

水平位置居中可以使用css屬性text-align來控制text-align:center; //文字居中如果需要文字垂直位置居中解決方法一般使用設定文字的行高和父級元素高度一致的辦法來做

例如文字文字文字文字

12樓:布吉島深深

text-align: center;

vertical-align: middle;

13樓:匿名使用者

text-align: center;水平

line-height:div的高度;垂直

div用css定義邊框為實線但為什麼預覽的時候不顯示

width 100px heigh 100px border 1px solid cccccc 你這這個定義的?加個float left 或display block overflow hidden 看看!最好你能貼一下你的css 可能沒有加顏色和粗細。加個 border 1px 999 solid...

高數的極限與連續打星號的那一行為什麼N

我給你解釋下吧,那個中括號是一種數學表示方式,你在書裡上方某個地方有解釋,意思內是不大於括號容裡面的數的最大正整數,給你打個比方,27.001 27 17.999 17 如果我沒記錯的話,這個表示方法解釋是在華東師範出版社的數學分析的書左側上面吧。哦,剛才沒看到你們學的高數,不是數學專業的應該沒有,...

為什麼我的css自定義字型在別人的電腦上不生效

你要把字型檔案放到伺服器上啊 在伺服器上測試一下路徑 看看能不能找到 字型檔案 很可能是別人電腦上沒有這個字型,自然就沒有效果了 css裡設定的字型chrome瀏覽器中不生效 10 chrome可以指定全域性字型,看看設定裡面 這是你係統的事兒呀 系統找不到指定的字型,可以在 font family...