在垂直线上垂直居中书写文本

Question

Here is my JsFiddle

I wish to write the text "OR" in the center of the border. I did it with absolute position. Is there any better solution then this.

.test {
width: 300px;
height: 300px;
border-right: 1px solid #000;
position: relative;
}
.test::after {
content: 'OR';
position: absolute;
background: #FFF;
left: 291px;
top: 140px;
}

Answer 1

What you are doing is fine. What is "better" is subjective because that would depend on your specific use-case.

Assuming from the word "OR", that you want to use that div as a separator for content.

In that case one problem I see is with the large fixed width (300px) which, can put you in a tight spot when trying to use that as a separator for content. You would have to put one content in that div and the other alternative (to be compared with "or") in another and somehow stack them together. You might have trouble getting this in a fluid layout.

If I am right, you are trying to have something like this:

Demo: http://jsfiddle.net/abhitalks/rNQjX/15/

Idea is to use a separate div and use that purely as a separator. This will allow you to change separator independent of content. With this layout, changes in browser/window width/height will be fluid.

Example Markup:

<div></div> <!-- regular page content -->
<div class="wrap"> <!-- wrapper for comparison content -->
    <div class="content"></div> <!-- content option 1 -->
    <div class="sep"></div> <!-- *** Seperator *** -->
    <div class="content"></div> <!-- content option 2 -->
</div>
<div></div> <!-- regular page content -->

Example CSS:

div.wrap { /* wrapper for comparison content */
    height: auto;
    background-color: #ccc;
    position: relative;
}
div.content { /* content div */
    float: left;
    width: 50%;
}
div.sep { /* separator div */
    width: 1px;
    border: 1px solid gray;
    margin-left: -3px;
    position: absolute;
    top: 0px; bottom: 0px;
    left: 50%;
}
div.sep::after { /* separator text */
    content:'OR';
    position: absolute;
    top: 48%; left: -14px;
    background-color: #ccc;
}

Answer 2

Your code looks fine to me, I posted below a slightly modified version.

http://jsfiddle.net/rNQjX/14/

.test {
    width: 300px;
    height: 300px;
    border-right: 1px solid #000;
    position: relative;
}
.test::after {
    content:'OR';
    background: #FFF;
    position: inherit;
    margin-left: 291px;
    top: 140px;
}

Answer 3

You can try this one with exact vertical alignment without position absolute :

http://jsfiddle.net/kongkannika/rNQjX/18/

.test {
    width: 300px;
    height: 300px;
    border-right: 1px solid #000;
}
.test::after {
    content: 'OR';
    background: #FFF;
    line-height: 300px;
    margin-left: 290px;
}