CSS樣式 字型 元素的垂直水平居中

2021-09-27 01:44:07 字數 1096 閱讀 3745

1.css樣式與html中標籤屬性的區別:

標籤的屬性是採用 屬性名=「屬性值」 表示的

css樣式是採用名值對 屬性名:屬性值; 表示的

2.內聯元素(行內元素)與塊元素

(1)內聯元素及其特點:

所謂的行內元素,指的是只佔自身大小,不會獨佔一行

常見的內聯元素:

a img iframe span

span沒有任何語義,span標籤專門用來選中文字,並對該文字設定樣式

對內聯元素設定寬高是無效的,也不可以設定行高,其寬度和高度都預設被元素撐開

將內聯元素放在 li 標籤中可以設定其寬高

可以對內聯元素設定內邊距,ie6以上瀏覽器支援

可以對內聯元素設定外邊距,但只對左右外邊距起作用

(2)塊元素:

所謂的塊元素是會獨佔一行的元素,無論他的內容多少都會獨佔一行

p h1 h2 h3...都是塊元素

div標籤沒有任何語義,就是乙個純粹的塊元素,並不會對其裡面的元素設定任何樣式

可以對塊元素設定高度和邊距

如果不自己設定寬度,其寬度為其父元素寬度

塊元素中可以容納塊元素和內聯元素,但內聯元素中不能包含塊元素

3.幾種居中方式

(1)設定塊元素中文字水平居中

使用text-align 樣式設定塊中文字或居中。

該樣式只能操作塊元素或者被css 顯示成塊元素的內聯元素

對乙個塊元素設定該樣式後,其子塊元素中的文字或者也會相對於其子塊元素居中

(2)塊元素自身水平居中

通過設定 magin:0 auto; 使該塊元素在其父元素中水平居中顯示

(3)內聯元素的垂直居中

通過設定 vertical-algin 樣式

該屬性適用於:

內聯元素(被轉換成內聯元素的塊元素)

display 設定為 table-cell 的元素

在 table 也就是**中的元素

(4)設定塊元素中文字垂直居中

通過設定塊元素的內邊距

(5)塊元素自身垂直居中

可以通過設定外邊距實現

通過絕對定位設定其距離父元素的 left right top bottom 來實現

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

巧用translate設定元素垂直水平居中

之前在做手機專案時,用到很多自定義彈窗,然後要求都垂直水平要居中,最開始的時候想用calc來計算,可是css3 的calc相容性不是很好,於是後來就借助了js來計算,今天偶然看到別人的乙個方法,瞬間感覺自己做了很多無用功 translate,translate,translate,translate...

css 字型垂直 水平居中

也可以這樣 父元素position relative 子元素position absolute 相對于父元素 left 50 top 50 相對於自身偏移 transform translate 50 50 啦啦啦 tt為啥呢,這是。好吧。看樣式中 display table cell 作為 單元格...