br 不输出换行符 HTML

Question

我想在我的 .center 区域中垂直显示文本。但是，我似乎无法使用断线。我也试过将 <?php echo "<br>"; ?> 推到我的代码中。仍然没有运气。

这是我的代码的小图片，完整代码 + 最后找到的代码结果图片。

.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 -->

我已经尝试查看我的 CSS 以查看这是否可能是我的问题，但我似乎找不到问题所在，也找不到解决方案。我也尝试过重新排列我的 div。 <p>CENTER TEXT</p> 当我在末尾插入时也不会打印出任何间距，但它通常会更改 <p> 内容。

完整代码 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>

Answer 1

您正在 .center class 上使用 display: flex。

使用flex-direction: column让flex表现为一个列；

.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>

根据评论进行编辑；

如果您是 flex 新手，我建议您玩 flexboxfroggy to learn about thinks like justify-content and align-items

Answer 2

当你说垂直显示文本时，你的意思是从上到下而不是从左到右？

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

将为您完成，只需将其放在 .center css https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

br 不输出换行符 HTML

br not outputting a line break HTML

html

css

line-breaks