在固定的div中对齐和居中图像

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.

我有一个非常简单的页面和一个固定的页脚。在这个页脚上，我要放置5个图像，它们之间的距离相等。

Here is my HTML/CSS :
Footer div :

这是我的HTML/CSS:页脚div:

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

And the HTML :

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 !

我想在中间显示红色的图标。它应该根据使用“%”值的显示分辨率进行响应。我想在页脚做一个网格。但是有更简单的方法吗?在网上找不到关于这个的任何信息，希望它不是复制品!预先感谢您的帮助!

5 个解决方案

#1

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

您可以添加文本对齐:在固定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>

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

#3

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

}


img
{ 
  display:inline-block; 
}

#4

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

只需添加text-align:中心;到父div.fixed

#5

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

您可以使用flexbox来对齐子项目垂直中心和水平等距。

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.

不需要为子元素提供任何额外的样式，比如在固定的div中对齐和居中图像。Flexbox将会处理对齐，并且得到了大多数浏览器的支持。

#1