CODEWITHSUNDEEP
cssline
user4279433
user4279433

Reputation:

Vertical line align property in css

I am going to draw a line which starts from left of the page:

I used <hr> tag, here is its style:

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

But the is no align property for <hr> as describes here!

With this style, line draws in the middle of the page.

How can i draw line from the left side of the page?

Upvotes: 1

Views: 85

Answers (2)

Joe Kdw
Joe Kdw

Reputation: 2261

You can also use table-cell to let it middle vertical-align, as in:

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>

Upvotes: 0

Caio Tarifa
Caio Tarifa

Reputation: 6043

Just add margin-left: 0; (Chrome, Safari and Firefox) and text-align: left; (IE and Opera) on the hr tag.

hr {
  height: 1px;
  margin-left: 0;
  text-align: left;
  width: 500px;
}
<p>Example</p>
<hr>
<p>Example</p>

Upvotes: 3

Related Questions