estou tentando deixar uma pagina HTML com algumas divs alinhadas lado a lado e centralizadas na página. Tenho o seguinte 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>
As divs com class="box"
devem ficar lado a lodo e centralizadas, já as divs com classe="box-texto"
não devem ficar centralizadas. A ideia é fazer funcionar apenas com CSS sem criar novas tags.
Tentei usar foat: left
, ele alinhou lado a lado, mas não consegui centralizar. Tive outras tentativar com display
mas também sem sucesso.
No link abaixo tem um exemplo onde estava trabalhando:
https://stackblitz.com/edit/js-m2ngja?file=style.css
Conto com a ajuda de todos!
#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>