br not outputting a line break HTML

Question

I want to display text vertically in my .center area. However, I can't seem to be able to use break line. I've tried shoving <?php echo "<br>"; ?>into my code aswell. Still no luck.

Here is a small picture of what my code looks like, full code + pic of the results of the code found at the end.

.center{
  width:60%; 
  height:1000px;
  float:left;
  display: flex;
  align-items: center;
  justify-content:center;
}

<div class="center">
  <p>CENTER TEXT</p>
  <br>
  <p>test...</p>
</div>  <!-- end .center -->

I've tried looking into my CSS to see if that may be my issue, but I can't seem to find the issue, nor a solution. I've tried rearranging my divs too. <p>CENTER TEXT</p> does not print out any spacing when I insert that at the end aswell, but it changes <p> contents normally otherwise.

FULL CODE this is the result of the code

body {
  background-color: black;
}

h1 {
  color: red;
  text-align: center;
  font-family:Arial;
  font-style:italic;
}

pre, p {
  color:white;
  text-align: center;
  font-family:Arial;
    font-size: 25px;

}

#index{
  width:100%
  border: 1px solid red;
  display: flex;
  justify-content: center;

}

#page{
  width:100%;
  border: 2px solid red;
  height:auto;
}

.header{
  width:100%;
  height:100px;
  background:orange;
  float:left;
}

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  align-items: center;
  justify-content:center;
}

.left{
  width:20%;
  float:left;
  height:1000px;
  background:red;
}

.right{
  width:20%;
  float:left;
  height:1000px;
  background:blue;
}

.bottom{
  clear:both;
  width:100%;
  height:100px;
  background:green;
  float:left;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> øvingCSS </title>
  </head>
  <body>
    <div id="index">
      <div id="page">
        <div class="header">
          <p>TOP TEXT</p>
        </div> <!-- end .header -->
        <div class="left">
          <p>LEFT TEXT</p>
        </div> <!-- end .left -->
        <div class="center">
          <p>CENTER TEXT</p>
          <br>
          <p>test...</p>
        </div>  <!-- end .center -->
        <div class="right">
          <p>RIGHT TEXT</p>
        </div> <!-- end .right -->
        <div class="bottom">
          <p>BOTTOM TEXT</p>
        </div> <!-- end .bottom -->
      </div> <!-- end page -->
    </div> <!-- end index -->
  </body>
</html>

0stone0 · Accepted Answer · 2020-10-27T19:43:06.363

You're using display: flex on the .center class.

Use flex-direction: column to let flex behave as a column;

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

body {
  background-color: black;
}

h1 {
  color: red;
  text-align: center;
  font-family:Arial;
  font-style:italic;
}

pre, p {
  color:white;
  text-align: center;
  font-family:Arial;
    font-size: 25px;

}

#index{
  width:100%
  border: 1px solid red;
  display: flex;
  justify-content: center;

}

#page{
  width:100%;
  border: 2px solid red;
  height:auto;
}

.header{
  width:100%;
  height:100px;
  background:orange;
  float:left;
}

.center{
  width:60%;
  height:1000px;
  float:left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}

.left{
  width:20%;
  float:left;
  height:1000px;
  background:red;
}

.right{
  width:20%;
  float:left;
  height:1000px;
  background:blue;
}

.bottom{
  clear:both;
  width:100%;
  height:100px;
  background:green;
  float:left;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> øvingCSS </title>
  </head>
  <body>
    <div id="index">
      <div id="page">
        <div class="header">
          <p>TOP TEXT</p>
        </div> <!-- end .header -->
        <div class="left">
          <p>LEFT TEXT</p>
        </div> <!-- end .left -->
        <div class="center">
          <p>CENTER TEXT</p>
          <br>
          <p>test...</p>
        </div>  <!-- end .center -->
        <div class="right">
          <p>RIGHT TEXT</p>
        </div> <!-- end .right -->
        <div class="bottom">
          <p>BOTTOM TEXT</p>
        </div> <!-- end .bottom -->
      </div> <!-- end page -->
    </div> <!-- end index -->
  </body>
</html>

Edit based on comments;

If you're new to flex, I advice playing flexboxfroggy to learn about thinks like justify-content and align-items

is there any way of making the spacing between the lines smaller/tighter? — crud, Oct 27 '20 at 19:40
@jerpo Yes, use [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and/or [align-items](https://www.w3schools.com/cssref/css3_pr_align-items.asp). Please take a look at my latest edit. If you're new to flex, this will help a lot! — 0stone0, Oct 27 '20 at 19:41
Yes! I am very much a newbie IT student! I will make sure to check out the helpful resources! :) — crud, Oct 27 '20 at 19:45

score 1 · Answer 2 · answered Oct 27 '20 at 19:39

1

When you say display the text vertically, you mean from up to down instead of left to right?

writing-mode: vertical-rl; 
text-orientation: upright;

will do that for you, just place it in the .center css https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

answered Oct 27 '20 at 19:39

Lorebass

42
7

not exactly what I meant, but I have also been wondering whether this was possible! – crud Oct 27 '20 at 19:48

br not outputting a line break HTML

2 Answers2