How to create a vertical line with a text in the middle

css

Solution

Actually, many ways.

One of them:

html

<div class="wrapper">
    <div class="line"></div>
    <div class="wordwrapper">
        <div class="word">or</div>                                        
    </div>
</div>​

css

.wrapper {
    position: relative;
    width: 250px;
    height: 300px;
    border: 1px dashed #ccc;
    margin: 10px;
}

.line {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.wordwrapper {
    text-align: center;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -12px;
    z-index: 2;
}

.word {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px;
    font: bold 12px arial,sans-serif;
    background: #fff;
}

​

See example: http://jsfiddle.net/zmBrR/22/

Problem

Original source