将图像对齐并居中固定格

我有一个固定页脚的非常简单的页面。在这个页脚上，我想放置5个图像，它们之间以等距离居中。将图像对齐并居中固定格

这里是我的HTML/CSS：
页脚DIV：

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

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

这里是我获得：

我想要显示红色图标a中心。它应该根据显示分辨率使用'％'值进行响应。我曾想过在页脚中做网格。但有没有更简单的方法来做到这一点？在网上找不到任何关于此事的信息，希望它不是重复的！非常感谢您的帮助！

来源

2017-01-17 saperlipopette

您只需在fixed div上添加text-align: center即可。

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>

来源

2017-01-17 15:44:40

谢谢，没想到，完美！ – saperlipopette

不客气。 –

我无法设法将它们与margin-top垂直对齐，你有如何做到这一点的想法？ – saperlipopette

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

} 


img 
{ 
    display:inline-block; 
}

来源

2017-01-17 15:46:46

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>

来源

2017-01-17 15:48:13 Vixed

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

来源

2017-01-17 15:53:32

可以使用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会照顾对齐，并且得到大多数浏览器的很好支持。

来源

2017-01-17 15:59:06

将图像对齐并居中固定格

回答

相关问题