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

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  style="text-align:right;">READ MORE</button>
</div>

Any help is welcome. Thanks!

CodePudding user response：

#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          : 0 auto;
  cursor          : pointer;
  position        : absolute;
  }
.button1 {
  background-color : white;
  }
  
/*  added to see white text */
body { background : darkblue; }

<div id="container">
<pre style="font-family:Calibri; color: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  style="text-align:right;">READ MORE</button>
</div>
</div>

CodePudding user response：

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 >
        <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  style="text-align:right;">READ MORE</button>
    </section>