How to place a button bellow a <pre> element in HTML/CSS? - html

Question

I want to place it like this:
this my code so far, but nothing of what I tried actually works:
what am I doing wrong?
#container {
text-align : center;
}
.button {
border : none;
color : rgba(93, 24, 172, 0.603);
padding : 15px 15px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 10px;
margin : 10px 2px;
cursor : pointer;
position : absolute;
}
.button1 {
background-color : white;
}
/* added to see white text */
body { background : darkblue; }
<pre style="font-family:Calibri; color:white;text-align:left;">
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.
</pre>
<div text-align="center">
<button class="button button1" style="text-align:right;">READ MORE</button>
</div>
Any help is welcome. Thanks!

Answer 1

#container {
text-align : center;
}
.button {
border : none;
color : rgba(93, 24, 172, 0.603);
padding : 15px 15px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 10px;
margin : 15px 10px;
cursor : pointer;
}
.button1 {
background-color : white;
}
/* added to see white text */
body { background : darkblue; }
pre{
display:inline-block;
text-align:left;
margin:0 auto;}
<div id="container">
<pre style="font-family:Calibri; color:white;border: 1px solid white;">
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.</pre>
<div text-align="center">
<button class="button button1" style="text-align:right;">READ MORE</button>
</div>
</div>

Answer 2

The main issue with your code is that button has an absolute position so it was removed from the normal document flow. Also depending on your website, you would need some sort of layout, or container around the button and text to keep them together.
I moved the button under the text and made a container for them. I also removed some unnecessary css and html you had, like the div around the button.
body {
background: #496bbe
}
.Container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: fit-content;
}
.button {
border: none;
color: rgba(93, 24, 172, 0.603);
padding: 15px 15px;
font-size: 10px;
cursor: pointer;
}
.button1 {
background-color: white;
}
pre {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: white;
text-align: left;
white-space: pre-wrap;
}
<section class="Container">
<pre>
Duis aute irure dolor in reprehenderit in voluptare
velit esse cillum dolore eu fugiat nulla pariatur.
Exceptur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est.</pre>
<button class="button button1" style="text-align:right;">READ MORE</button>
</section>