4

Tenho uma div que contem outra div dentro, porém esta segunda div (de dentro) contem um <img src="">, como eu posso fazer para deixar esta div com a imagem alinhada no centro da primeira div? já tentei vertical-align, horizontal-align e etc e nada da certo.

Aqui está no exemplo

#clientes-logo1
{
    width: 250px;
    height: 200px;
    background-color: white; 
    margin: 5px 5px 5px 0;
    display:inline-block;
}

#logotipo-clientes 
{
    width: 220px;
    height: auto;
    /* vertical-align: middle; -- não funciona */
    /* horizontal-align: middle; -- não funciona */
    margin: 50px 5px 0px 15px; /* se usar assim a div principal desalinha */
}
<div id="clientes">
  <h1>Clientes</h1>
  <div id="clientes-logo1">
    <img id="logotipo-clientes" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" title="" alt="">
  </div>
</div>

    

2 Respostas 2

3

Em uma busca com esse mesmo problema um dia encontrei essa solução!

///////// CSS

.center
    {
        display:         flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
    }

//////// HTML

<div class="center">
            <img id="logotipo-clientes" src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" title="" alt="">
</div>
1

Para alinhar na vertical:

HTML:

<div id="clientes">
  <h1>Clientes</h1>

  <div class="clientes-logo">
    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" title="" alt="">
  </div>

  <div class="clientes-logo">
    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" title="" alt="" width="100">
  </div>

  <div class="clientes-logo">
    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png" title="" alt="">
  </div>
</div>

CSS:

#clientes {
    width: 100%;
    height: auto;
}

.clientes-logo {
    width: 250px;
    height: 200px;
    background-color: white; 
    display:inline-block;
    background: #ccc;
    position: relative;
}

.clientes-logo img {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);  
}

Lembre-se que ao repetir um elemento que herdará os mesmos estilos, use class e não id.

9
  • Alinhou na vertical mas não na horizontal, eu poderia até usar margin-top: 20%; só que se uma imagem for maior que a outra eles não ficaram exatamente no centro da div principal.
    – RFL
    12/08/2015 às 15:02
  • @RafaelAcioly, como assim? Com o que te passei ele alinha horizontalmente e não verticalmente. Assim mesmo, você quer alinhar nos dois sentidos. Mas em relação a que? Sua div clientes tem heigth auto.
    – buback
    12/08/2015 às 15:06
  • @RafaelAcioly, tente agora.
    – buback
    12/08/2015 às 15:09
  • minha div de logotipo-clientes esta dentro da div clientes-logo1, a div clientes-logo1possui 250 por 200px, e a div da imagem possui 220 em width e auto em height para não distorcer eu gostaria que a imagem de dentro (logotipo-clientes) ficasse no meio da div clientes-logo1
    – RFL
    12/08/2015 às 15:11
  • 1
    Adiciona um left: 50% e também um translate pro X - algo assim: jsfiddle.net/L1e8rymm
    – Ricardo
    12/08/2015 às 20:51

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 .