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

Question

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

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

fetch

HTML：

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

这是我获得的：

我想在中心显示红色图标。它应具有响应性，具体取决于使用'％'值的显示分辨率。 我想在页脚中做一个网格。但有更简单的方法吗？ 在网上找不到任何关于此的内容，希望它不是重复的！ 提前感谢您的帮助！

Answer 1

您只需在text-align: center div。

上添加fixed即可

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

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

您可以使用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
}

无需为子元素添加任何额外样式，例如<img>。 Flexbox将负责对齐，并且得到大多数浏览器的支持。