0

I would love to put the images in logos related to the center of the boxes.

https://pnghunter.com/logo/acura-nsx-gray/

How can I affect this?

4 Answers4

3

Add css properties display: block; margin: 0 auto to the images.

You can also use flexbox. Add the following css properties -

display: flex; align-items: center; justify-content: center;

Animan
  • 312
  • 1
  • 10
2

You'll need to display the image as block and add auto margin to both sides (left & right).

.container {
   background-color: gray;
   padding: 30px 0;
}

img {
   width: 50%;
   
   /* This will do the trick */
   display: block;
   margin: 0 auto;
}
<div class="container">
    <img src="https://purepng.com/public/uploads/large/purepng.com-acura-nsx-graycarvehicletransportautocars-561521125226tokdl.png" alt="Car">
</div>

Alternative: Use flexbox. Will not be as robust as auto-margins due to many bugs still present in IE. However, if the parent's height is set, this will also center vertically.

.container {
  background-color: gray;
  padding: 30px 0;

  /* Here comes the magic */
  display: flex;
  justify-content:center;
  align-items: center;
  
}

img {
  width: 50%
}
<div class="container">
    <img src="https://purepng.com/public/uploads/large/purepng.com-acura-nsx-graycarvehicletransportautocars-561521125226tokdl.png" alt="Car">
</div>
Double M
  • 1,449
  • 1
  • 12
  • 29
2

put this css rules...

.logo__container{
   display: flex;
    align-items: center;
    justify-content: center;
}
Akbar Soft
  • 1,028
  • 10
  • 19
2

You should use flexbox for this. Add the following css to the containers (logo__container):

    display: flex;
    justify-content: center; //horizontal
    align-items: center; //vertical
hansolo
  • 160
  • 2
  • 8
  • 1
    It's easier to use "display: block and margin: 0 auto". Lesser attributes will be better. – Animan Aug 16 '18 at 12:41
  • It doesn't add the vertical alignment though. – hansolo Aug 16 '18 at 12:54
  • @hansololives Not sure if vertical alignment is a requirement of the OP. Note that `flexbox` is [bugged in IE](https://caniuse.com/#search=flexbox). Auto-margins are safer in terms of compatibility. – Double M Aug 16 '18 at 13:34
  • But if you inspect the website he linked you can see that he already has the `display: block` and `margin-left: auto; margin-right: auto` on the images, so I assumed he wanted something more. – hansolo Aug 16 '18 at 13:50
  • @hansololives Absolutely correct guess :) Thank you very much! –  Aug 17 '18 at 11:36