设计HTML hr 元素水平线的对齐方式

概览

在 HTML 旧版本中，规定 <hr> 元素的对齐方式属性可以使用 align: left;center;right 来定义，但在 HTML5 中已经不受支持，HTML 4.01 已废弃。 

而在 CSS 中，通过 margin 外边距元素来控制 <hr> 向父级元素的距离以达到对齐方式。

CSS

div.listGroup {
	margin: 50px auto;

}
hr.lineLeft {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0;
}
hr.lineRight {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 0;
}
hr.lineCenter {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
}

HTML

<div class="listGroup">
	左对齐
	<hr class='lineLeft'>
</div>
<div class="listGroup">
	居中对齐
	<hr class='lineCenter'>
</div>
<div class="listGroup">
	右对齐
	<hr class='lineRight'>
</div>