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

2022-07-05 18:18:08 字數 1019 閱讀 1866

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

我是一段測試文字

如果看過我前面一片做乙個簡單網頁的日誌就知道,這個應該放在body標籤裡面。

放在網頁裡就是這樣:

為了能看清楚,我把body設定成960px寬,而且新增了灰色邊框。

加乙個text-align:center;就變成了這樣:

確實到了**,但如果padding-left:10px;padding-right:50px;結果就成了這樣:

我試了下,不太明顯,因為總的寬度960太大了,換成padding-left:10px;padding-right:300px;,結果就是這樣:

這下就明顯了,text-align:cneter;也不齊了,所以當對不齊的時候,看看有沒有這樣的情況存在。

說到padding,也可以用padding來對齊,極不推薦,所以不多說了。

再來說說垂直對齊,這個比較麻煩,如果是一行文字,可以用line-height來控制,也就是用行距來控制,line-height的值和文字所在容器的高度一樣,比如,上面那個例子,p的高度是30px,就像這樣:

為了看清楚,p用淡灰色背景標示,要把文字放在中間可以加上line-height:30px;,結果就成了這樣:

看吧,垂直方向到中間了,配合上text-align:center;,就到了正中間了。

垂 直方向對齊有乙個屬性vertical-align,vertical-align:top;,vertical- align:middle;,vertical-align:bottom;,分別對應上對齊,中對齊,下對齊。為什麼我一開始不說呢,有時候會無效,所 以我不常用,本來垂直對齊就不常用。

最後就是用padding了,一般是padding-top,數值多少就要看情況了。

css 文字的水平垂直對齊

水平居中 text align 應用於塊級元素的文字水平居中 text align left 左對齊 text align right 右對齊 text align justify 兩端對齊 text align center 水平居中 將塊級元素中的內聯元素設定為水平居中,並不能使塊級元素水平居中...

文字垂直水平對齊方式

123 div怎麼才能做到123的位置水平垂直方向的隨意變化,例如左上,中下 水平方向的話使用text align就可以了,相容性很好,關鍵是垂直方向。css也有vertival align來設定垂直方向的定位,但是它是為了table cell設計的 要用到vertical align,需要將div...

CSS 布局 水平 垂直對齊

元素居中對齊 要水平居中對齊乙個元素,可以使用 margin auto 設定到元素的寬度將防止它溢位到容器的邊緣 元素通過指定寬度,並將兩邊的空外邊距平均分配 水平居中塊級元素 如 div 可以使用 marig auto 注意 使用 margin auto 無法相容 ie8,除非 doctype 已...