Stuck. How do I center and space out these 3 texts?

Question

Trying to left, center, right the 3 pieces of text? Trying to use CSS and I'm stuck.

Thanks.

Answer 1

you could use flex and set justify-content to space-between

#text-container {
  display: flex;
  justify-content: space-between; 

}

<div id="text-container">
  <p>Left</p>
  <p>Middle</p>
  <p>Right</p>
</div>

Answer 2

You could use the flex property to solve this. You would have a parent div which contains all 3 of your children items. Depending on where the item is in your HTML code, the content will justify to its respective side. So if it's the first, it will be justified to the left. If it's the second, it will be justified to the middle. And if it's the third, it will be justified to the right. Here is how you would do it;

#bar {
  display: flex;
}

#bar>* {
  flex: 1;
  display: flex;
}

#bar> :nth-child(1) {
  justify-content: flex-start;
}

#bar> :nth-child(2) {
  justify-content: center;
}

#bar> :nth-child(3) {
  justify-content: flex-end;
}

<div id="bar">
  <p>Left</p>
  <p>Middle</p>
  <p>Right</p>
</div>

Answer 3

I agree with the other responses. Check out this really helpful/visual website on flexboxes

You want to set the parent div as display: flex and depending on what you want to do, you can set justify-content: flex-start for left, justify-content: flex-end to right, and justify-content: center to center.