CSS為什麼行高line height與文字高height一樣就能讓文字居中?有沒有人能具體點解

時間 2021-08-11 18:14:09

1樓:小夏在深圳

當一行文字,必須是一行在一個

塊內部顯示時,將該

塊的行高設定為這個塊本身的高度,就可以讓內部的一行文字垂直居中。

相應的css**如下:

div{

width:1000px; height:30px;

background-color:#ff5857; //該屬性為背景顏色,主要是讓我們能夠看到塊本身

line-height:30px;

line-height 屬性的取值和 height 屬性的取值是相同的,這樣內部的一行文字就實現垂直居中。

在css中,line-height 屬性的調整就是以這條線為標準線的。換句話說,當line-height屬性設定為一定的數值時,段落中任意兩行的行距就是這兩行基線之間的距離。

擴充套件資料利用精靈元素實現垂直居中的**

**如下:

ghost-center {

position: relative;

.ghost-center::before {content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

.ghost-center p {

display: inline-block;

vertical-align: middle;

width: 20rem;

2樓:小小挖墳匠

我介紹你去看看這篇大牛的文字,詳細介紹了line-height

行高line-height的一些深入理解及應用/

css中 line-height和font-size之間有什麼關係? 20

3樓:匿名使用者

這位網友你好,你設定字型為2px是無效的,字型不可能那麼小的。line-height指的可能是從字的最頂部到下一行字的最頂部的距離,你可以試試把行高跟字型設定成一樣,可以看到行距直接為0。一般設定行高都要比字型大。

4樓:綠過你的世界

以chrome為例

1、在chrome中font-size與height並不是相等的,比如:當font-size設定為10px的時候,實際高度height為12.8px(可通過盒模型驗證),font-size為11時,實際高度為15.

2px……這就導致當你將font-size設定為10px時,實際高度為12.8px,自然會超出一部分

2、同時在chrome瀏覽器,當font-size設定為10或10以下時,chrome瀏覽器預設font-size為10px(解釋了您所提到的設定為2px看起來還比較大的原因)

5樓:匿名使用者

這個是因為你用的瀏覽器不支援10px以下的字型,比如360就不支援12px以下的字型大小,行高最好不要設成和字型大小一樣大這樣會連在一起

6樓:

line-height 與 font-size 的計算值之差(在 css 中成為「行間距」)分為兩半,分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。你這個原因應該是有些瀏覽器不支援太小的字型

7樓:回憶

css中 line-height和font-size之間的關係,首先需要理解line-height的意思,它是css中表示的行高,font-size的意思是字型的大小,如多少px,之間關係是字型大小越大,那麼必然的行高是肯定比較大的,這2者一般都是用於文字排版時更加美觀一些,一般還要結合height使用,讓文字垂直居中,具體請看**:

我是測試文字

8樓:匿名使用者

有的瀏覽器預設字型最小是12px!

css中如何在設定了line-height 和 height的情況下 讓文字能自動換行?

9樓:我4蝸牛先生

文字自動換行和行高以及盒子高度無主要關係,但是固定高度的時候,文字太多會溢位。line-height指的是行高,可以決定盒子高度能分配幾行文字。

自動換行方法:

div一般盒子高度不會固定,而是雖著文字的的多少自動增加高度。

10樓:識趣天下

在你文字所在的那個元素加一個樣式

word-break:break-all;

希望你的問題能解決,望採納

11樓:卓火

首先我不知道你的全域性樣式寫了沒有,如果沒有的話最好寫一個,不然會出很多bug。然後我沒看見你這邊有設定li的高度。line-height是行高,也可以理解為行間距,並不是你line-height有多高你的li就會有多高,li在自適應的情況下是字型的高度加上padding的高度再加上line-height來自行判斷高度的。

我建議你乾脆不要用line-height,直接給li一個固定高度,高度為兩條虛線間的距離,然後給個display:inline-block,vertical-align:bottom;應該就能實現了

12樓:灘詧攤浪謤諮

不知道你是不是要這種效果

css*

bodyulali

13樓:

1、給li加個padding:0和margin:0 試試;

2、測試測試測試測試測試測試測試測試測試測試測試ulli

u 在li標籤中加u標籤然後修改樣式,上面是我測試用的**。

14樓:三度奶粉

給li寬度、底部邊框為虛線就ok了。

15樓:安靜了

不要設定height、 只設定line-height 和邊距

16樓:匿名使用者

是不是設定邊距了,設定成這樣試試list-style:none; padding:0; margin:0;

17樓:flys_li的春天

設定一個 min-height

css line-height行高 與 font-size 一樣嗎?有何區別?拒絕複製貼上

18樓:匿名使用者

當然是不一樣的:

line-height,指的是文字行高,也就是上一行文字頂部到下一行文字頂部之間的距離,不是兩行文字之間的距離。

font-size,是指文字大小,文字本身所佔的頁面大小,通常用px和em或rem表示。

19樓:匿名使用者

一個是行高,一個是字型大小,怎麼可能一樣呢 。

行高就是控制兩行文字之間的行距

字型大小變大變小,設定了行高,兩行文字之間就是那個固定值。

20樓:

不一樣line-height 設定 標籤的行內的定位 一般用於 在一行中 div內部內容或標籤上下高度的定位

font-size 設定 字型的大小

css中line-height與height的區別?

21樓:tt小聖人

簡單來說,line-height是行高的意思,height則是定義元素自身的高度。

例如下面這段**

如果我們定義.test ,那麼這個元素的實際高度將取決於其中內容的多少,假如文字部分在瀏覽器裡面顯示為一行,那麼這個div的實際高度就是20px,如果文字顯示為兩行,那麼div的實際高度就是40px,而且文字的行高是20px的;

如果我們定義.test,那麼這個元素的實際高度一般並不會因為內容的多少而發生改變,如果文字顯示為一行,那麼這個div的高度仍然是40px,如果顯示為2行,但是文字的行高不夠20px,這個div的高度也不會因為文字內容的高度小於height而發生改變。不過如果文字內容的高度大於40px了,一般來說這個div的高度還是會相應增加的。

22樓:東鼕鼕鼕鼕冬

區別如下:

1、定義不同

:line-height是行高的意思,height則是定義元素自身的高度。

2、表示意義不同: line-height用來表示容器的高度,height用來表示這一容器內的每行文字的高度。

3、使用範圍不同:line-height只針對行元素,height針對其他所有元素。

4、針對物件不同:line-height一般針對字型來設定,如果一行文字在div裡面,且行高等於高度的話,則文字會垂直居中。heigh一般用來設定文字外圍的div容器。

5、height是對於某個框架或者**來弄的。line-height用於文字,如果要實際效果你可以寫一段文字,分好幾行,然後對它做line-height屬性,就會注意到變化了。

擴充套件資料:

css語言特點

css為html標記語言提供了一種樣式描述,定義了其中元素的顯示方式。css在web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來說,css具有以下特點:

1、豐富的樣式定義

css提供了豐富的文件樣式外觀,以及設定文字和背景屬性的能力;允許為任何元素建立邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文字的大小寫方式、修飾方式以及其他頁面效果。

2、易於使用和修改

css可以將樣式定義在html元素的style屬性中,也可以將其定義在html文件的header部分,也可以將樣式宣告在一個專門的css檔案中,以供html頁面引用。總之,css樣式表可以將所有的樣式宣告統一存放,進行統一管理。

另外,可以將相同樣式的元素進行歸類,使用同一個樣式進行定義,也可以將某個樣式應用到所有同名的html標籤中,也可以將一個css樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應的樣式宣告進行修改。

3、多頁面應用

css樣式表可以單獨存放在一個css檔案中,這樣我們就可以在多個頁面中使用同一個css樣式表。css樣式表理論上不屬於任何頁面檔案,在任何頁面檔案中都可以將其引用。這樣就可以實現多個頁面風格的統一。

4、層疊

簡單的說,層疊就是對一個元素多次設定同一個樣式,這將使用最後一次設定的屬性值。

例如對一個站點中的多個頁面使用了同一套css樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些後來定義的樣式將對前面的樣式設定進行重寫,在瀏覽器中看到的將是最後面設定的樣式效果。

5、頁面壓縮

在使用html定義頁面效果的**中,往往需要大量或重複的**和font元素形成各種規格的文字樣式,這樣做的後果就是會產生大量的html標籤,從而使頁面檔案的大小增加。

23樓:匿名使用者

line-height是行高,height就是高,通常height是對於某個框架或者**來弄的,line-height用於文字

如果要實際效果你可以寫一段文字,分好幾行,然後對它做line-height屬性,就會注意到變化了

比如:abc

abcabc

abcabc

調整20px這個值,行間距就會發生變化

另外,line-height和height組合到一塊兒,還有一種效果,就是如果把它們的值設定的一樣了,文字就會在垂直方向居中

為什麼CS S在國內不普及 國際上CS S的比賽不是挺多的嗎 而CS S的戰鬥比CS1 6激烈啊

不是不普及,而是還沒到普及的時間點,就在中國來說cs的普及都要比其他歐美國家要慢半拍,這半拍的時間大概是1 3年左右,其原因就我個人認為有主要二點,一 這個遊戲是美國研發的,又不是中國,從西半球到東半球再融入社會肯定是要時間了,不可能那麼快的.二 就是文化.經濟,人的意識形態更深層次的東西了,你沒發...

為什麼要在引入的css或者js檔案後面加引數的詳細講解

如下所示 問 上面連結外部的css或js檔名後跟了一個 並帶上一個引數,作用是什麼呢?答 js或css帶引數,是為了避免舊的瀏覽器快取繼續生效 特別是在大型站中隨時可能會更改區域性css檔案,為了避免瀏覽器重新整理而繼續使用舊的css快取檔案,在使用時往往會帶上一個動態引數。為什麼要在引入的css或...

為什麼要在引入的css或者js檔案後面加引數的詳細講解

貼了一粑粑 這麼做的目的是避免瀏覽器載入快取的js或者css檔案,給這些檔案加一個引數,瀏覽器檢測到連結變了,自然不會載入快取裡的檔案,而是重新傳送請求。這個技巧一般是在更新了css或者js檔案以後用到。js檔案和css檔案連線後面帶的引數是什麼意思 du瓶邪 如下所示 來 問 上面源連結外部的cs...