Centering a line of text without using flex box neither grid-CodePudding

How would you achieve the layout inside the squares, considering you have no permission to change the html only by adding css?

This is the html i got:

.container>p {
  border: 4px black solid;
  font-size: 1.5em;
  padding: 40px 30px 40px 20px;
  width: 400px;
  height: 150px;
}

.container {
  display: flex;
  justify-content: space-around;
}

p:nth-child(1) {
  color: red;
}

p:nth-child(2) {
  color: orange;
}

p:nth-child(3) {
  color: green;
}

<div >
  <p>
    Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
    <a href="https://www.w3schools.com/html">Click here</a> to learn more about it.
  </p>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
    <a href="https://www.w3schools.com/css">Click here</a> to learn more about it.
  </p>
  <p>
    JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.
    <a href="https://www.w3schools.com/js">Click here</a> to learn more about it.
  </p>
</div>

I have managed to line the cubes by using flex on the "container".

But to get the rest im stuck.

I have tried "align text" and it obviously changes the order of the text - no good. i have tried also to put flex on the p itself but it mess everything as well.

CodePudding user response：

in order the centerize the text you should add the following code:

.container > p {
    //your attributes...
    text-align: center;
}

CodePudding user response：

Just add height:auto to your p tag. I've reduced your font-size. and add gap to your flex container

.container>p {
  border: 4px black solid;
  font-size: 0.875em;
  padding: 40px 30px 40px 20px;
  width: 400px;
  height: auto;
  
}

.container {
  display: flex;
  justify-content: space-around;
  gap:15px;
}

p:nth-child(1),
p:nth-child(1) a{ color: red;}

p:nth-child(2),
p:nth-child(2) a{color: orange;}

p:nth-child(3),
p:nth-child(3) a{ color: green;}

<div >
  <p>
    Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
    <a href="https://www.w3schools.com/html">Click here</a> to learn more about it.
  </p>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
    <a href="https://www.w3schools.com/css">Click here</a> to learn more about it.
  </p>
  <p>
    JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.
    <a href="https://www.w3schools.com/js">Click here</a> to learn more about it.
  </p>
</div>

CodePudding user response：

You should try using the float property and changing the text-alignment to justify