Align and center images in a fixed div

Question

i have a very simple page with a fixed footer. On this footer, i'd like to place 5 images centered with equals distances between them.

Here is my HTML/CSS :
Footer div :

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 9%;
    background-color: pink;
}

And the HTML :

<div class="fixed">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
    <img style="max-width: 80%; margin-left: auto; margin-right: auto; max-height: 80%;" src="images/icons/icon.png">
</div>

Here is what i obtain :

I would like to display the red icons at the center. It should be responsive depending on the display resolution with the use of '%' values. I thought about doing a grid in the footer. But is there an easier way to do it ? Couldn't find anything about this on the web, hope it's not a duplicate ! Thank you in advance for any help !

Answer 1

You can just add text-align: center on fixed div.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  text-align: center;
}

<div class="fixed">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
</div>

Answer 2

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  text-align: center;
}
div.fixed >img{
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-height: 80%;
}

<div class="fixed">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
  <img src="images/icons/icon.png">
</div>

Answer 3

you can use flexbox to align child items vertically center and horizontally equally spaced.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 9%;
  background-color: pink;
  display: flex; //Set display to flex
  justify-content : space-around; //space equally horizontally
  align-items: center; //place at center vertically
}

No need to give any extra styling to child elements i.e. <img> in your case. Flexbox will take care of alignments and is very well supported by most of the browsers.

Answer 4

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 9%;
    background-color: pink;
    text-align: center

}


img
{ 
  display:inline-block; 
}

Answer 5

Just add text-align: center; to the parent div.fixed