Skip to main content
inclui o código do link
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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>

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!

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>

Fonte Link
Everton
  • 114
  • 8

Alinhar divs lado a lado e centralizar

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!