Currently, I'm using
<hr align="left" /> on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried
hr{align: left; max-width: 800px;} or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.
So what should I use instead of the inline attribute above?
One option would be to set the left margin to zero:
hr{max-width: 800px; margin-left:0;} 
You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/
hr { max-width: 100px; margin: 0px; } A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:
p:first-child:before { display: none; } p:before { content: " "; border: 1px solid black; margin-top: 15px; margin-bottom: 15px; display: block; max-width: 100px; } 
margin-left: 0 worked great, thksI don't know what browsers were used for some above answers, but I found neither text-align:left nor margin-left:0 worked in both IE (11, Standards mode, HTML5) and Firefox (29).
IE11: text-align:left works, margin-left:0 leaves rule centred.
FF: margin-left:0 works, text-align:left leaves rule centred.
So, either use both, or I found that margin-right:100% works for both!
margin-right is the way to go. I found setting it to auto prevented the margin from always extending past the edge of the container.You can use div tag instead.
<div style="border: thin solid lightgray; width: 100px;"></div> <hr> tags have margin-inline-start and margin-inline-end properties set to auto, which centers the element horizontally (similar to setting both left and right margins of an element to auto).
To left-align an hr tag, you can set margin-inline-start to 0:
hr { margin-inline-start: 0; } ...and you can right-align an hr tag by setting margin-inline-end to 0:
hr { margin-inline-end: 0; } do this
hr { display: inline; //or inline-block text-align: left; } 
.line { height: 2px; background-color: var(--itemBorder); color: var(--itemBorder); } .width100 { width: 100% !important; } .width90 { width: 90% !important; } .width80 { width: 80% !important; } .width70 { width: 70% !important; } .width60 { width: 60% !important; } .width50 { width: 50% !important; } .width40 { width: 40% !important; } .width30 { width: 30% !important; } .width20 { width: 20% !important; } .width10 { width: 10% !important; }<div class="line width100" />
