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

时间:2017-01-17 15:42:35

标签: html css

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

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

fetch

HTML:

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

这是我获得的:

screenshot of mobile browser display

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

5 个答案:

答案 0 :(得分:6)

您只需在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>

答案 1 :(得分:4)

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>

答案 2 :(得分:1)

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

}


img
{ 
  display:inline-block; 
}

答案 3 :(得分:1)

只需将text-align: center;添加到父div.fixed

即可

答案 4 :(得分:1)

您可以使用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将负责对齐,并且得到大多数浏览器的支持。