Reputation: 946

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

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

Upvotes: 12

Answers (7)

ttquang1063750

Reputation: 863

you can archive it by using flexbox for example

body {
  position: relative;
  height: 100vh;
}

.vertical {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-10px);
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  color: #999;
}

.vertical .line {
  width: 1px;
  flex: 1;
  background: #999;
}

<div class="vertical">
  <div class="line"></div>
  <div class="text">OR</div>
  <div class="line"></div>
</div>

Upvotes: 0

MR_AMDEV

Reputation: 1942

Regardless of the question asked, i am here going for a rather simple approach in both directions.

.demo-body{
height: 400px;
}

.line-wrapper{
    background: black;
    width: 2px;
    height: 100%;
    position: relative;
 }
 
 .line-wrapper .word{
    position: absolute;
    background: white;
    top: 50%;
    transform: translate(52%,-50%);
    right: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
  }
  
.line-wrapper .word.vertical{
   writing-mode: tb-rl;
}

<div class="demo-body">

<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
  <div class="word">OR</div>
</div>

<br>

<!-- VERTICAL TEXT -->
<div class="line-wrapper">
  <div class="word vertical">OR</div>
</div>

</div>

Upvotes: 0

stasdes

Reputation: 669

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>

Upvotes: 1

Deepak Chandh

Reputation: 275

You can use jquery to do the same thing. Import jquery cdn in your HTML document

select the required item and write a javascript code for that.

consider this example

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
 <style type="text/css">
 .completed{
 color: gray;
 text-decoration: line-through;
 }
 </style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
    <li>aaa </li>
    <li>bbb </li>
    <li>ccc </li>
 </ul>
</div>
<script type="text/javascript" >
`enter code here`

$("li").click(function () {
$(this).css("color","gray");    
$(this).css("text-decoration","line-through");
});
or 
$("li").click(function () {
$(this).toggleClass("completed");

});
</script>
</body>
</html>

In this example line is passed over the list(li) elements.

Upvotes: 0

Aleks Dorohovich

Reputation: 1652

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/

Upvotes: 17

Matt Stauffer

Reputation: 2742

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.

Upvotes: 2

Rahul Tripathi

Reputation: 172458

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>

Upvotes: 0

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

Answers (7)

Related Questions