Align Ivs side by side and center

Question

I am trying to leave an HTML page with some Ivs aligned side by side and centered on the page. I have the following html:

<div id="container">
    <div id="box-texto-1" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
    <div id="box-1" class="box">1</div>
    <div id="box-2" class="box">2</div>
    <div id="box-3" class="box">3</div>
    <div id="box-texto-2" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
</div>

The Divs with class="box" should be side by side with sludge and centralized, already the Divs with classe="box-texto" should not be centralized. The idea is to make it work only with CSS without creating new tags.

I tried to use foat: left, he lined up side by side, but I couldn’t center. I had others try to display but also without success.

In the link below is an example where was working:

https://stackblitz.com/edit/js-m2ngja?file=style.css

I count on everyone’s help!

#container {
  border: 1px solid blue;
  width: 100%;
  height: 100%;
  text-align: justify;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px 10px;
}

#box-1 {
  background-color: red;
}
#box-2 {
  background-color: green;
}
#box-3 {
  background-color: pink;
}

<div id="container">
    <div id="box-texto-1" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
    <div id="box-1" class="box">1</div>
    <div id="box-2" class="box">2</div>
    <div id="box-3" class="box">3</div>
    <div id="box-texto-2" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
</div>

Answer 1

Dry the model, just put display:inline-block in div.boxes, and text-alingn:center in the container, to the divs with text not being centered you declare them as text-align:left.

Notice that I didn’t add anything to the HTML, neither tag, nor class, I did everything as CSS keeping the HTML that you presented.

I left commented a comment for you to know the styles I added

#container {
    border: 1px solid blue;
    width: 100%;
    height: 100%;
    text-align: justify;
  }
  .box {
    width: 100px;
    height: 100px;
    margin: 10px 10px;
  }
  #box-1 {
    background-color: red;
  }
  #box-2 {
    background-color: green;
  }
  #box-3 {
    background-color: pink;
  }

/* etilos que adicionei */
  #container {
    text-align: center;
  }
  .box-texto {
    text-align: left;
  }
  .box {
    display: inline-block;
  }

<div id="container">
    <div id="box-texto-1" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
    <div id="box-1" class="box">1</div>
    <div id="box-2" class="box">2</div>
    <div id="box-3" class="box">3</div>
    <div id="box-texto-2" class="box-texto">Lorem ipsum velit leo risus ultrices pellentesque vehicula etiam ante
        malesuada nec</div>
</div>