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
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With