如何将div的左侧与页面中心对齐？

Question

I have a stack of divs down the center of the page (using margin:auto)

now I want to draw a line starting at the center and extending to the right (say 400 pixels). I'm a but stumped, any idea how to make this work nicely?

cheers!

Answer 1

Use this css:

div.line
{
    position: absolute;
    left: 50%;
    width: 50%;
}

Answer 2

div.line
{
  width: 400px;
  height: 10px;
  margin: 0 auto;
  border-right: 400px solid black;
}

Answer 3

Put the content inside another tag.

And style the tag as following(for example a div):

div.special_tag {
  float: right;
  width: 50%;
}

Answer 4

Personally, I'd just use margins:

Set to the left of the midline:

.leftSide {
 width: 400px;
 height: 100px;
 margin: 0 50% 0 auto;
 background: #555;
 border: #777 1px solid;
}

or right side of midline

.rightSide {
 width: 400px;
 height: 100px;
 margin: 0 auto 0 50%;
 background: #555;
 border: #777 1px solid;
}