CSS 文字對齊方式

2021-08-29 02:16:01 字數 1292 閱讀 7738

方法1:單行塊級元素水平居中只用新增text-align即可,如p標籤,垂直居中vertical-align只適用於行內元素與單元格,所以設定行高與塊高度相同即可

text-align: center;
方法2:普通的文字居中只要設定text-align即可,但是這個設定了p標籤的寬度,則是在該寬度內進行居中,則應該設定margin進行居中

.content  p

基本方法:

vertical-align: middle;
設定多行文字元素垂直居中的時候將父元素設定成**,子元素設定成單元格即可使用vertical

可以在vertical-align中輸入正負畫素讓他進行上下偏移

.content

豎直對齊的多種方式:

----sub和super值----css層疊樣式表sub

css層疊樣式表sub

css層疊樣式表super

----baseline、top、text-top、middle、bottom、text-bottom值----css層疊樣式表

(cascading style sheets)

css層疊樣式表

基線baseline

css層疊樣式表

頂端對齊top

css層疊樣式表

文字的頂端對齊texttop

css層疊樣式表

中部對齊middle

css層疊樣式表

文字底端對齊textbottom

css層疊樣式表

底端對齊bottom

----長度和百分比的值----css層疊樣式表

長度值css層疊樣式表

百分比值

----應用於單元格元素----top

middle

bottom

展示效果:

CSS文字對齊

文字旁邊搭配時,發現比文字靠上,原來預設的情況是頂對齊而文字底對齊,通過設定css屬性可以使得與文字對齊。設定各物件的vertical align屬性,屬性說明 baseline 將支援valign特性的物件的內容與基線對齊 sub 垂直對齊文字的下標 super 垂直對齊文字的上標 top 將支援...

css 文字(顏色 間距 首行縮排 對齊方式)

1 字型顏色 間距 首行縮排 對齊方式 將進酒 君不見,黃河之水天上來,奔流到海不復回。君不見,高堂明鏡悲白髮,朝如青絲暮成雪。人生得意須盡歡,莫使金樽空對月。天生我材必有用,千金散盡還復來。烹羊宰牛且為樂,會須一飲三百杯。岑夫子,丹丘生,將進酒,杯莫停。與君歌一曲,請君為我傾耳聽。鐘鼓饌玉不足貴,...

css基礎 文字對齊,水平對齊,垂直對齊

先說水平對齊,那首先想到的就是text align了,text align left,text align center,text align right,代表的就是左對齊,居中對齊和右對齊,需要注意的是如果有padding這類的東西在,千萬看清楚兩邊的padding值是否相 同,當你看到文字不在中...