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


Tags: css

Problem :

I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.

See image enter image description here



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/


    CSS Howto..

    How to highlight anchor link when target div comes in view - jQuery

    How to make table td take the width of its content

    how to override font-color dynamically with css color property

    Multiple css styles applied to one element, how to force one style over the other

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How to disable the letter tail from the last letter of a word in CSS?

    How do I remove nav underline on hover from Bootstrap theme?

    How to add second level to a submenu in a dropdown navigation css

    CSS - How to create a table cell with a two-colour background?

    How do I create page transitions for my website

    How to make combination of images responsive?

    how can i add a css file to body of a page?

    How to create a box with header with css styling?

    How to stop the latter part of javascript from being called?

    How do i cover the image on navbar as well?

    How to create a div with a diagonal (or angled) top line

    How to create a skin for mediaelement.js?

    How can I get the post text to be beside the avatar and not below it?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    How to enable real time CSS editing in chrome?

    How to iqnore mousemove event on child ul

    How to add text underneath the centered image

    How to line up a label to the right of a styled checkbox

    how to overwrite global css to div tag which contains different html tags with different style

    How to add inset box-shadow to mapbox-div?

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to achieve parallax behind horizontal bars while scrolling

    How to set just a percentage of a color in CSS?

    How to add css style if user scroll page over 112px

    How to have a centered layout with border (background-image), and footer sticked to the bottom?