Question

我有一个'主'div包含三个子div。每个子div都有一个图像。我的目标是让三个图像在我的页面上均匀对齐。图像大小相同（200像素×166像素）。如果有一些方法可以做到这一点，而不使用十几个div将是一流的。重申我的问题，我不希望所有三个图像都居中。我希望左边的img距离页面左边30像素;右边的img距离页面右边30像素，我希望中心img完全居中于两者之间。

HTML：

    <div id="aboutimages">
        <div id="aboutimgleft">
            <img src="Stylesheets/images/manpc.jpg" alt="" />
        </div>
        <div id="aboutimgcenter">
            <img src="Stylesheets/images/coffee.jpg" alt="" />
        </div>
        <div id="aboutimgright">
            <img src="Stylesheets/images/keyboard.jpg" alt="" />
        </div>
    </div>

CSS：

#aboutimages{
text-align: center;
    width: 100%;
    margin: 0 auto;
    float:left;
    }

#aboutimgleft img{
    float:left;
    padding-bottom:20px;
    padding-top:20px;
    padding-left:0px;
    width:250px;
} 

#aboutimgcenter {
    margin: 0 auto; 
    width: 70%;
}

#aboutimgcenter img{
    text-align:center;
    width:250px;
    height:166px;
    padding-bottom:20px;
    padding-top:20px;
}

#aboutimgright img{
    float:right;
    padding-bottom:20px;
    padding-top:20px;
    padding-right:0px;
    width:250px;
    height:166px;
}

我迫切希望得到任何形式的帮助 - 这让我感到沮丧。

谢谢，

埃文

Answer 1

有几种方法可以解决这个问题，这是一种方式：

#aboutimages {
    position:relative; /* constrain absolutely positioned child elements */
}

#aboutimgleft {
    float:left; /* Float the first element */
    margin-left:30px; /* Here's that 30px you wanted */
} 

#aboutimgcenter {
    margin: 0 auto; /* Center the second element */
}
#aboutimgright {
    /* easier than float:right, but that could work too with some tweaking */
    position:absolute;
    top:0;
    right:30px; /* Here's that other 30px you wanted */
}

只要图像在这些div中，它们就会对齐。

演示：http://jsfiddle.net/KPJP4/

Answer 2

这应该这样做：

<style type="text/css">
#aboutimgleft, #aboutimgcenter, #aboutimgright {
    float: left; 
    width: 33.33%;
}

#aboutimgleft img {
    margin-left: 30px;
}

#aboutimgcenter {
    text-align: center;
}

#aboutimgright {
    text-align: right;
}

#aboutimgright img {
    margin-right: 30px;
}
</style>

Answer 3

实现此功能的一种方法是将外部包装器设置为某个宽度并将其设置为text-align: center;，然后将所有div设置为display: inline-block;并分别浮动。我在这里用你的代码设置了一个测试页面（简化了一下）：http://jsbin.com/uworex所以你可以看到它现在如何为我工作。

将三个图像对齐，均匀分布在整个页面上

HTML：

CSS：

3 个答案: