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;
}

Answer 2

FIDDLE DEMO

删除

中的position:relative

#HeaderImages
{

top: 120px;
right: 500px;
text-align:center;
}

Answer 3

演示 - http://jsfiddle.net/pnxm4adn/2/

图片充当display:inline-block;以修复间距问题设置父font-size:0;这将删除图像之间的空白

删除了position:relative及其#HeaderImages的值，以便图片可见

#HeaderImages {
    text-align:center;
    font-size:0;
}

Answer 4

你只给div的第一个元素赋予宽度，所以其他所有元素都是img根据图像大小获取宽度，但宽度不够，所以剩下的img位置在第一行之下。所以我的建议是给每个剩余的img标签剩下的宽度/ 4

img{
    display: inline-block;
    margin: 0 auto;
    width: 16%;
}

img{
display: inline-block;
margin: 0 auto;
width: 16%;
}

   

    #HeaderImages
    	{
    	position: relative;
    	top: 20px;

    text-align:center;
    }

    #HeaderImages img
    {
    display:inline-block;
    margin:0 auto;
    width:16%;
      border:1px solid green;
      box-sizing:border-box;
    }
    #HeaderImages img:first-child{
    	width:32%;
    }

    <div id="HeaderImages">
        <img src="bg_black.png"/>
        <img src="bg_black.png" />
        <img src="bg_black.png"/>
        <img src="bg_black.png" />
        <img src="bg_black.png" />
      </div>

   

}

在DIV内水平对齐图像

4 个答案: