Question

是否可以将同一行中的三张图片左右，中间和右边对齐而不使用float，但只能text-align？

Answer 1

有一种方法可以使用text-align: justify执行此操作，其工作方式如下：

假设您有以下HTML：

<div class="wrap">
    <img src="http://placekitten.com/120/100">
    <img src="http://placekitten.com/120/100">
    <img src="http://placekitten.com/120/100">
    <span class="filler"></span>
</div>

应用以下CSS：

.wrap {
    border: 1px solid blue;
    text-align: justify;
    line-height: 0;
    height: 100px; /* option if you need tighter wrap of the border or background color */
}
.wrap img {
    vertical-align: top;
}
.filler {
    display: inline-block;
    width: 100%;
    font-size: 0px;
    vertical-align: top;
}

.filler元素需要使用display: inline-block，宽度为100％。这会导致其他内联元素（图像）在父元素的宽度上均匀分布。

有时，您可能会在包含图像的线框底部边缘下方看到一个额外的空白区域，但您可以通过将字体大小设置为0px并将垂直对齐设置为顶部来消除它。

请参阅演示：http://jsfiddle.net/audetwebdesign/AnYxC/

注意：
有些人喜欢使用伪元素来添加填充元素。但是，如果你不介意额外的标记，我的例子工作正常。

Answer 2

你可以创建3个宽度相等的div，然后将每个图像放在它们自己的div中，然后你可以按照你想要的方式对齐它们。

   <div id="container">
   <div id="left"><img src="image1.png" /></div>
   <div id="center"><img src="image2.png" /></div>
   <div id="right"><img src="image3.png" /></div>

   #left,#right,#center {width:300px;}
   #left{text-align:left;float:left;}
   #center {text-align:center;float:left;}
   #right {text-align:right;float:left;}

你必须浮动div，但你仍然使用文本对齐图像。

不使用浮动将图像对齐左，中，右

2 个答案: