Image alignment with CSS

Question

Image alignment with CSS

Navigation

#1 by (3 votes)
#2 by (1 votes)

4

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

Here is 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

asked by anonymous 12.08.2015 / 16:55

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>

12.08.2015 / 20:05

Firebird, insert with where not exists How to transform a hash into a color

score 1 · Accepted Answer

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 you repeat an element that will inherit the same styles, use class and not id .