html5靜態內聯元素的對齊的方法

想對靜態內聯元素在水平和或垂直方向進行對齊，並令它們從對齊位置進行偏移。下面我們就給大家介紹一下html5靜態內聯元素的對齊的方法吧!

解決方案

為了在水平方向上把內容對齊到它的終端塊狀容器的邊上，可使用text-align.text-align:left會把內容左側對齊，text-align:right會把內容右側對齊，text-align:ceter會把內容居中，text-align:justify會把內容兩端對齊。對兩端對齊的內容來說，它的行數必須要大於一行，因為浏覽器不會對最後一行采取兩端對齊。

為了把內聯內容中的某一行進行垂直居中，可以把line-height設置成一個大於內容高度的值。它之所以起作用，是因為浏覽器會把每行都垂直居中的。當你的內容多於一行的時候，它就不起作用了。

為了使內聯內容在垂直方向上對齊，可使用vertical-align:CONSTANT或vertical-align:±VALUE.只有在同一行中的內容擁有不同的高度或者不同的垂直對齊設置時，才能看到垂直對齊的效果。垂直對齊在不同行顯示的不一致，因為浏覽器會把每一行包裹起來，並對其進行垂直居中。因此，內聯垂直對齊只是相對於內容中的某一行的。

水平模式

靜態內聯元素的左對齊

TERMINAL-BLOCK-SELECTOR { position:static; text-align:left; }

靜態內聯元素的中心對齊

TERMINAL-BLOCK-SELECTOR { position:static; text-align:center; }

靜態內聯元素的右對齊

TERMINAL-BLOCK-SELECTOR { position:static; text-align:right; }

靜態內聯元素的兩端對齊

TERMINAL-BLOCK-SELECTOR { position:static; text-align:justify; }

垂直模式

靜態內聯元素的垂直居中對齊

SELECTOR { position:static; line-height:+VALUE; }

靜態內聯元素的相對對齊

SELECTOR { position:static; vertical-align:±VALUE; }

適用范圍

這些模式只適用於內聯元素。

以上就是我們給大家介紹的html5靜態內聯元素的對齊的方法了。希望大家繼續關注我們的網站!