竖线对齐属性 in css

Question

我要画一条线，从页面左边开始：

我使用了 <hr> 标签，这是它的样式：

hr {
     background: #D8D8D8; 
     width: 500px;
     height: 1px;
}

但是 align 属性 <hr> 没有描述 here!

使用这种样式，线条绘制在页面中间。

如何从页面左侧画线？

Answer 1

只需在 hr 标签上添加 margin-left: 0;（Chrome、Safari 和 Firefox）和 text-align: left;（IE 和 Opera）。

hr {
  height: 1px;
  margin-left: 0;
  text-align: left;
  width: 500px;
}

<p>Example</p>
<hr>
<p>Example</p>

Answer 2

你也可以用table-cell让它居中vertical-align，如：

hr {
     background: #D8D8D8; 
     width: 500px;
     height: 1px;
     display:table-cell;
}

<p>This is some text. This is some text. This is some text.</p>

<hr>

<p>This is some text. This is some text. This is some text.</p>

Vertical line align property in css