想对静态内联元素在水平和或垂直方向进行对齐，并令它们从对齐位置进行偏移。下面我们就给大家介绍一下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静态内联元素的对齐的方法了。希望大家继续关注我们的网站!