0

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>

2
  • Ja tentou usar o conceito do bootstrap usando rows e cols ? 12/02/2021 às 19:36
  • Olá, não tentei isso ainda pois estou tentando fazer com css puro. Obrigado!
    – Everton
    12/02/2021 às 20:26

1 Resposta 1

1

Seque o modelo, basta colocar display:inline-block nas div.box, e text-alingn:center no container, para as divs com texto tb não ficarem centralizada vc declara elas como text-align:left.

Repare que eu não adicionai nada no HTML, nem tag, nem classe, fiz tudo como CSS mantendo o HTML que vc apresentou.

Deixei comentado um comment para vc saber os estilos que eu adicionei

#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>

2
  • Muito obrigado! funcionou perfeitamente.
    – Everton
    15/02/2021 às 11:36
  • @Everton dmr jovem! Abs
    – hugocsl
    15/02/2021 às 11:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .