line / margin / border inside of the div with div styling (html / css)

Question

For some practical reasons, I need to achieve the center / middle line inside of the div with div styling.

<div style="position: relative; left: 0px; top: 0px; width: 80px; height: 90px; border-left: solid 1px black;" onclick="this.style.background='rgba(0, 0, 0, 0.5)';" oncontextmenu="return false;"></div>

div in action -> http://jsfiddle.net/ZkC68/

How to achieve this? If there isn't a better way, I was thinking to move for ex. left border inside, but I don't know how...

Answer 1

If you want to style the center line directly I think that's not possible. (no such css selector exists) However, you can do something like this:

<div id="container">
<div id="center-line">Center line</div>
</div>

And the CSS for styling as requested:

#center-line
{
text-align: center;
vertical-align: middle;
padding: 20px; //not necessary, but makes it look good imo
}

See: http://jsfiddle.net/cdkyZ/1/