How do I make a vertical line down the middle, also a horizontal line centered?

HTML & CSS
1 
<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>


<div class="hr4"></div>


</div>

</body>
</html>

Like this?

2

I did it using this code and it worked. This was in it but I removed it.
transform: transitionX(-50%);

I don’t think it belonged in there cause it works without it.


.verticalLine {
  position: absolute;
  background-color: blue;
  width: 6px;
  top: 91px;
  bottom: 0px;
  left: 50%;
}
3

How would I do a horizontal line centered. This isn’t exactly working.

.horizontalLine {
background-color: red;
bottom: 0px;
left: 50%;
position: absolute;
transform: rotate(90deg);
top: 0px;
width: 6px;

4

Is this acceptable code?

  .horizontalLine {
  position: absolute;
  width: 6px;
  top: 0px;
  bottom: 0;
  left: 229;
  background-color: red;
  transform: rotate(90deg);
5

How do I center the red horizontal line?


<style type="text/css">

.outer {
  max-width:464px;  /*476*/
  border:solid 6px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
  position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 0px;
  margin-left: 26px;
  margin-right: 20px;
}

  .hr4 {
  display: block;
  padding-bottom: 372px;
  border-top: 6px solid #38761d;
  margin-top: 27px;
}

.verticalLine {
  position: absolute;
  background-color: blue;
  width: 6px;
  top: 91px;
  bottom: 0px;
  left: 50%;
}
  .horizontalLine {
  position: absolute;
  width: 6px;
  top: 0px;
  bottom: 0;
  left: 229;
  background-color: red;
  transform: rotate(90deg);
    
    
 

}
</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>


<div class="hr4"></div>
<div class="verticalLine"></div>
<div class="horizontalLine"></div>
</div>

</body>
</html>
6

If I’m not doing this correctly please tell me.

7

With this sort of thing, it’s important to look at the final result you’re after. If there are going to be columns of text, or even a grid of boxes, you are better off using the containers for those columns or cells as the means of adding vertical and horizontal lines.

So what’s the context of all these lines? Are they for separating chinks of content?

8

I’m most likely going to place pictures in each of them.

9

So start with two divs side by side (table or flex layout) and create the vertical line as a border on one of them. Then place boxes inside them, getting the horizontal line with borders on those, too.

5 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.