Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I put a vertical line down the center of a div?

Tags:

html

css

How do I put a vertical line down the middle of a div? Maybe I should put two divs inside the div and put a left border on one and a right border on the other? I have a DIV tag and I need to put one ascx on the left (that will get swapped out from time to time with another ascx) and then a static ascx on the left. Any ideas on how I should do this? Maybe I answered my own question.

Any pointers would be great

like image 646
Hcabnettek Avatar asked Jul 24 '09 20:07

Hcabnettek


People also ask

How do I center a vertical line in CSS?

Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.

How do you insert a vertical line in HTML?

A vertical line can be created in HTML using transform property in <hr> tag. With the help of this property, you can rotate a horizontal line to a vertical line.

How do you make a vertical separator line in HTML?

To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.


1 Answers

Maybe this can help you

.here:after {      content:"";      position: absolute;      z-index: -1;      top: 0;      bottom: 0;      left: 50%;      border-left: 2px dotted #ff0000;      transform: translate(-50%);  }    div {      margin: 10px auto;      width: 60%;      height: 100px;      border: 1px solid #333;      position:relative;      text-align:center  }
<div class="here">Content</div>

Here's is a JSFiddle demo.

like image 120
ddjikic Avatar answered Sep 22 '22 22:09

ddjikic