html - DIV 内的水平对齐图像

Question

我试图在 DIV 内水平对齐图像，但它不起作用。

这是我的代码:

HTML:

<div id="HeaderImages">
    <img src="Images/1_home_main.png" width="32%" />
    <img src="Images/1_structure_home.png" />
    <img src="Images/2_insurance_home.png" />
    <img src="Images/3_credit_home.png" />
    <img src="Images/4_actions_home.png" />
</div>

CSS:

#HeaderImages
{
position: relative;
top: 120px;
right: 500px;
text-align:center;
}
#HeaderImages img
{
display:inline-block;
margin:0 auto;
}

请帮忙。

Answer 1

您正在使用 right 的相对位置，这会阻止它居中。此外，margin: 0 auto; 将帮助您完成此任务。

#HeaderImages
{
margin: 0 auto;
position: relative;
top: 120px;
text-align:center;
}