Alignment and center image in a fixed div

Question

I have a very simple page with a fixed footer. On this footer, I would like to place 5 images with centers with equal distances between them.

Here is my HTML / CSS:
Footer:

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

And 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 get:

I would like to display red icons in the center. It should respond based on the resolution of the display using the "%" value. I was thinking about creating a mesh in the footer. But is there an easier way to do this? I can not find anything about this on the Internet, I hope that this is not a duplicate! Thank you in advance for your help!

Answer 1

text-align: center 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>

Hide result

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>

Hide result

Answer 3

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

}


img
{ 
  display:inline-block; 
}

Answer 4

text-align: center; div.fixed

Answer 5

you can use flexbox to align the children vertically in the center and horizontally evenly.

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 additional style to child elements, i.e. <img>in your case. Flexbox takes care of alignment and is very well supported by most browsers.