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

Question

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

Answer 1

this is the solution with flex box: https://jsfiddle.net/1z0runv9/1/

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}

.or-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #d3d7da;
}

.vertical-line {
  border-left: 1px solid #d3d7da;
  flex-grow: 1;
  width: 1px;
}

 <div class="wrapper">
   <div class="or-separator">
     <div class="vertical-line"></div>
     <div>Or</div>
     <div class="vertical-line"></div>
   </div>
 </div>
 

Answer 2

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/

Answer 3

Put a <div> around the markup and use CSS like this:-

 <div class="verticalLine">
   some other content
  </div>

in cSS:-

 .verticalLine {
border-left:thick solid #ff0000;
 } 

OR you can try this:-

<style type="text/css">
 #your_col {
  border-left: 1px solid black;
  }
</style>

<div id="your_col">
  Your content here
</div>

Answer 4

Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.

http://jsfiddle.net/mstauffer/uyTB7/

HTML:

<div class="container">
    <div class="side">Left side</div>
    <div class="or">
        <div class="or-line"></div>
        <div class="or-label">Or</div>
    </div>
    <div class="side">Right side</div>
</div>

​CSS:

.container {
    padding: 1em;
}
.side, .or {
    float: left;
    height: 6em;
    text-align: center;
}
.side {
    width: 40%;
}
.or {
    position: relative;
    width: 20%;
}
.or-line {
    float: left;
    width: 50%;   
    border-right: 1px solid #aaa;
    height: 6em;
}
.or-label {
    background: #fff;
    color: #aaa;
    height: 1em;
    left: 50%;
    margin-left: -1.25em;
    margin-top: 2em;
    padding: .5em;
    position: absolute;
    text-transform: uppercase;
    width: 1em;
}
​

Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.