将图像左对齐、中对齐和右对齐，不使用浮点

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，但您仍然对图像使用文本对齐。