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