How to make a vertical line

Asked

Viewed 39,330 times

5

Hi I was wondering how does a vertical line with this code:

<hr>

She by default is horizontal, really wanted her vertical, anyone know how it does? I just wanted this code because I have it upright on my site too.

html css

  • Could edit your post and put the code in question?

  • I had put more bugo, I fixed

  • Yes, that style of hers

  • You would have to do with CSS and HTML, because there is no vertical line in pure HTML.

  • Worse than I can’t do it because I’m a beginner :(

  • I gave an example in my answer, check if that’s what you want.

  • 1

    There are many ways to make a vertical line in HTML, it would be nice for you to put your original code here and explain in which part is the vertical line, so we can propose an alternative that best suits your case. The way the question looks, it’s a little broad, but if you have a little more context, I think it’s cool.

Show 2 more comments

2 answers

6

You can add vertical line with HTML and CSS as follows:

.linha-vertical {
  height: 500px;/*Altura da linha*/
  border-left: 2px solid;/* Adiciona borda esquerda na div como ser fosse uma linha.*/
}
<div class="linha-vertical"></div>

You can place line in the center using two elements <div>, as in the example below:

.box {
 width: 50%;
 float: left;
 height: 300px;/*Altura da linha*/
}

.linha-vertical {
 border-left: 2px solid;/* Adiciona borda esquerda na div como ser fosse uma linha.*/
 box-sizing: border-box;
}
<div class="box">

</div>
<div class="box linha-vertical">

</div>

  • What is the CSS name to put in the middle? Like this: . vertical line { height: 500px;/Line height/ border-center: 2px Solid;/ }

  • To place the vertical line with border in css would not put in the center of the html element, but you can do this by changing the size of the element.

  • Check the other example I did, if that’s not what you’re looking to do.

  • In 2 code it practically stayed in the middle, but where does the size increase is where? In border-left: 2px Solid;? , height: 200px;/Line height/ ? or width: 40%;?

  • No height: 200px;/Line height/

  • I raised her higher she didn’t move, I wanted her to go to the middle :(

  • To leave it in the middle, do: width: 50%, the way I changed the answer.

Show 2 more comments

1

This "code" is actually an HTML markup to create a horizontal line.

In PHP there are no functions that render HTML on the page. I believe what you can do is;

Create a div, place the border (left or right) with the color and thickness you want and ira will generate a line.

  • But she’d be vertical? .-.

  • yes, because the div would be a "box" only with the left/right border colored, the rest would not have.

  • @Rafaelacioly you explained well the concept of html markup, but I advise you to put a practical example of what should be done to solve the problem. In this case, a css example. So your answer is complete.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.