CSS 对齐(Align)
CSS 水平对齐(Horizontal Align)
在CSS中,有几个属性用于元素水平对齐。
块元素对齐
块元素是一个元素,占用了全宽,前后都是换行符。
块元素的例子:
<h1>
<p>
<div>
在这一章中,我们会告诉你块元素如何水平对齐布局。
中心对齐,使用margin属性
块元素可以把左,右页边距设置为"自动"对齐。
margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> </head> <body> <div class="center"> <p>人心灵的伤痛若无知己来抚慰,便会荒芜;人的欢乐若知己来共享,再多的快乐也是悲伤。知己之于人,本是必不可缺。一个人的痛苦要找人倾诉,一个人的愁绪要有人来排解。人若没有知己,心灵便是一片怎样的荒凉。 青春都是如此,带着疼痛,却又义无反顾。世上本无事,庸人自扰之。人生在世,总是有些空城旧事,年华未央;总是有些季节,一季花凉,满地忧伤。许多事,看开了,便会峰回路转;许多梦,看淡了,便会云开日出。学会思索,学会珍藏,微笑领悟,默默坚强。</p> </body> </html>
提示: 如果宽度是100%,对齐是没有效果的。
运行程序尝试一下
使用position属性设置左,右对齐
元素对齐的方法之一是使用绝对定位:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .right { position:absolute; right:0px; width:300px; background-color: #4ce667; } </style> </head> <body> <div class="right"> <p>人心灵的伤痛若无知己来抚慰,便会荒芜;人的欢乐若知己来共享,再多的快乐也是悲伤。知己之于人,本是必不可缺。一个人的痛苦要找人倾诉,一个人的愁绪要有人来排解。人若没有知己,心灵便是一片怎样的荒凉。 青春都是如此,带着疼痛,却又义无反顾。世上本无事,庸人自扰之。人生在世,总是有些空城旧事,年华未央;总是有些季节,一季花凉,满地忧伤。许多事,看开了,便会峰回路转;许多梦,看淡了,便会云开日出。学会思索,学会珍藏,微笑领悟,默默坚强。</p> </div> </body> </html>
注意:绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素。
运行程序尝试一下
使用float属性设置左,右对齐
使用float属性是对齐元素的方法之一:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .right { float:right; width:300px; background-color:#b0e0e6; } </style> </head> <body> <div class="right"> <p>人心灵的伤痛若无知己来抚慰,便会荒芜;人的欢乐若知己来共享,再多的快乐也是悲伤。知己之于人,本是必不可缺。一个人的痛苦要找人倾诉,一个人的愁绪要有人来排解。人若没有知己,心灵便是一片怎样的荒凉。 青春都是如此,带着疼痛,却又义无反顾。世上本无事,庸人自扰之。人生在世,总是有些空城旧事,年华未央;总是有些季节,一季花凉,满地忧伤。许多事,看开了,便会峰回路转;许多梦,看淡了,便会云开日出。学会思索,学会珍藏,微笑领悟,默默坚强。</p> </div> </body> </html>
运行程序尝试一下