Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Posicionamento de elementos de uma lista

por nathalia da silva ferreira
| 23.3k xp | 3 posts

Pessoal, tudo bem? finalizei o curso de html Css aqui, mas ainda tenho dúvidas na hora de posicionar os elementos. vejam abaixo. Criei uma class para minha lista de trabalhos. (nesta lista existem 6 itens). Gostaria que ficassem centralizados na pagina (o que com margin: 0 auto; achava que resolveria) mas eles ficaram orientados na direita . Alem disso queria que ficasse somente 3 itens em cada linha. Como posso resolver isso? Espero que consigam me ajudar.

.listadetrabalhos{
    background: #f7f7f7;
    width: 100%;
}

.listadetrabalhos li{
    display: inline-block;
    vertical-align: top;
    margin:0 auto;
}
.listadetrabalhos li h2{
    margin: 10px 0;
}

insira seu código aqui

4 respostas
por mbthales
| 200.1k xp | 165 posts

Olá Nathalia, tudo bem? Tem como você postar seu HTML aqui também? Com isso, dá pra te ajudar melhor!

por nathalia da silva ferreira
| 23.3k xp | 3 posts

aqui Thales :)

Hey, I´m Nathalia

        <section class=listadetrabalhos>
            <ul>
                <li>
                    <h2>Ilustração</h2>
                    <img src="imagens/tumbs/tumbilustracao1.jpg">
                </li>
                <li>
                    <h2>K&N</h2>
                    <img src="imagens/tumbs/tumbilustracao2.jpg">
                </li>
                <li>
                    <h2> Alphaprint</h2>
                    <img src="imagens/tumbs/tumbilustracao3.jpg">
                </li>
                <li>
                    <h2>Ilustração</h2>
                    <img src="imagens/tumbs/tumbilustracao1.jpg">
                </li>
                <li>
                    <h2>K&N</h2>
                    <img src="imagens/tumbs/tumbilustracao2.jpg">
                </li>
                <li>
                    <h2> Alphaprint</h2>
                    <img src="imagens/tumbs/tumbilustracao3.jpg">
                </li>
            </ul>
        </section>
    </body>
</html>
solução!
por mbthales
| 200.1k xp | 165 posts

Pelo o que eu entendi, você quer fazer isso aqui, certo? https://i.imgur.com/a4C9xVC.png?1

Se a resposta for sim, é só agrupar 3 items da lista em div's diferentes:

    <section class="listadetrabalhos">
      <ul>
        <div>
          <li>
            <h2>Ilustração</h2>
            <img src="imagens/tumbs/tumbilustracao1.jpg" />
          </li>
          <li>
            <h2>K&N</h2>
            <img src="imagens/tumbs/tumbilustracao2.jpg" />
          </li>
          <li>
            <h2>Alphaprint</h2>
            <img src="imagens/tumbs/tumbilustracao3.jpg" />
          </li>
        </div>
        <div>
          <li>
            <h2>Ilustração</h2>
            <img src="imagens/tumbs/tumbilustracao1.jpg" />
          </li>
          <li>
            <h2>K&N</h2>
            <img src="imagens/tumbs/tumbilustracao2.jpg" />
          </li>
          <li>
            <h2>Alphaprint</h2>
            <img src="imagens/tumbs/tumbilustracao3.jpg" />
          </li>
        </div>
      </ul>
    </section>

E depois, no CSS, colocar apenas um text-align: center nas mesmas div's:

.listadetrabalhos div {
  text-align: center;
}

Isso deve solucionar seu problema. Espero ter ajudado!

por nathalia da silva ferreira
| 23.3k xp | 3 posts

Thales, deu certo :0... muito obrigada!