Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Writing text vertically center on an vertical line

Writing text vertically center on an vertical line

Problem

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;
}
Problem courtesy of: shubendrak

Solution

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:

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;
}
Solution courtesy of: Abhitalks

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Writing text vertically center on an vertical line

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×