0

Preciso alinhar um conjunto de imagens randômicas no centro de uma div, segue código de exemplo:

HTML

<div class="divAlign">
    <img src="teste.jpg">
    <img src="teste2.jpg">
    <img src="teste3.jpg">
    <img src="teste4.jpg">
</div>

CSS

.divAlign {
    width: 80%;
    margin: 0 auto;
}

.divAlign img {
    width: 60px;
}

Se tiver 4 imagens ou 2 ou 1 elas tem q ficar no meio, todas juntas...

1 Resposta 1

2

Olá!!!

Bem, para alinhar uma imagem na vertical, você pode usar vertical-align. Para alinhar à esquerda ou à direita, pode usar float. para alinhar horizontalmente no meio pode fazer o seguinte:

div.img-container{
  width: 300px;
  height: 500px;
  border: 1px dashed #ddd;
}

div.img-container img{
  display: block;
  margin: 0 auto;
}
<div class="img-container">
    <img src="http://placehold.it/140x100">
    <img src="http://placehold.it/140x100">
    <img src="http://placehold.it/140x100">
    <img src="http://placehold.it/140x100">
</div>

JSFIDDLE

Outro exemplo:

div.img-container{
  text-align:center;
  width: 800px;
  height: 200px;
  border: 1px dashed #ddd;
}

div.img-container div{
  display:inline-block;
  margin:5px 0px;
  padding: 0;
}
<div class="img-container">
    <div>
        <img src="http://placehold.it/140x100">
    </div>
    <div>
        <img src="http://placehold.it/140x100">
    </div>
    <div>
        <img src="http://placehold.it/140x100">
    </div>
    <div>
        <img src="http://placehold.it/140x100">
    </div>
</div>

JSFIDDLE 2

3
  • as imagens tem q estar uma ao lado da outra e não uma em cima da outra!
    – Alan PS
    Commented 26/05/2016 às 19:38
  • Pronto, bro! Vê agora!!! Commented 26/05/2016 às 19:42
  • certo, vlw!!!!!!!!!
    – Alan PS
    Commented 26/05/2016 às 19:47

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 .