我有一个非常简单的页面,固定的页脚。在这个页脚上,我想放置5个图像,它们之间的距离相等。
这是我的HTML / CSS:
页脚div:
fetch
HTML:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
height: 9%;
background-color: pink;
}
这是我获得的:
我想在中心显示红色图标。它应具有响应性,具体取决于使用'%'值的显示分辨率。 我想在页脚中做一个网格。但有更简单的方法吗? 在网上找不到任何关于此的内容,希望它不是重复的! 提前感谢您的帮助!
答案 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将负责对齐,并且得到大多数浏览器的支持。