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 find the css, color codes and other coding a site uses

    How to change css properties depending on parent, but with the same class name [closed]

    How to reach 'this' element in the .css part in Jquery

    How to use toggle css classes on an element onclick?

    How to make html table made by list responsive?

    How Would I Center Text In This DIV?

    How to word wrap text in HTML?

    How to get my app to fill the full height on mobile?

    HTML, CSS - image inside image, how to do that?

    How to make multiple divs always fill out the whole browser size?

    Bootstrap, css How to change background

    How to add own icons in bootstrap navbar

    How do I make a div expand to the width of the page with css?

    How to place a consistent 5px margin around an inner div without specifiying inner divs height?

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

    How do I make images interactive?

    How to select the table heading of the first row in table using css selectors?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to place circle and text in one line?

    How do I keep this sidebar stationary yet still responsive?

    How to get a style property from a css class and set it to another css class?

    How can I target a element inside h2

    How to load external css in CakePHP?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to spread three columns in CSS across a page equally

    How to define multiple CSS attributes in JQuery?

    How often is the default font size in the browser not 16px?

    How do browsers process and apply CSS styles to DOM elements?

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    how does the path work in css and js