Image alignment with CSS

Asked

Viewed 21,648 times

4

I have a div that contains another div within, but this second div (from within) contains a <img src="">, how can I do to leave this div with the image aligned in the center of the first div? have tried vertical-align, horizontal-align and etc and nothing right.

Here is in the example

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

html css

2 answers

3

In a search with this same problem one day I found this solution!

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


To align vertically:

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%);  
}

Remember that when repeating an element that will inherit the same styles, use class and not id.

  • Lined up vertically but not horizontally, I could even use margin-top: 20%; only if one image is larger than the other they were not exactly in the center of the main div.

  • @Rafaelacioly, what do you mean? With what I passed to you it aligns horizontally and not vertically. Anyway, you want to align in both directions. But in relation to what? Your div customers have heigth auto.

  • @Rafaelacioly, try it now.

  • my div of logotipo-clientes this one inside the div clientes-logo1, the div clientes-logo1is 250 per 200px, and the image div is 220 in width and auto em height para não distorcer i would like the inside image (logo-customers) to be in the middle of the div clientes-logo1

  • @Rafaelacioly, set a height for customers-logo1 and use the change I made. It should work.

  • seemingly worked only that if I use display: inline-block they don’t stand next to each other, and I don’t want the main div to fit the size of the image, I want the size to be fixed and the inside image to be in the middle of it.

  • Let’s go continue this discussion in chat.

  • 1

    Add a left: 50% and also a Translate pro X - something like this: http://jsfiddle.net/L1e8rymm/

  • @Ricardo, good observation. I’ll add.

Show 4 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.