为什么`text-align：justify`只适用于第一行图像？

Question

我有几个跨越两行的图像。我希望能够将它们均匀地分开。

我使用text-align：justify进行了测试，但由于某种原因，这不适用于最后一行（使用Chrome测试）。有谁知道为什么会发生这种情况以及如何纠正？

调整演示窗口的大小，使图像换行到另一行。

JSFIDDLE ：http://jsfiddle.net/1djb153n/

HTML ：

<div class="bespokeimages">
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>

CSS ：

.bespokeimages {
    text-align:justify;
}

Answer 1

尝试使用flexbox（相同的HTML）：

.bespokeimages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.bespokeimages img {
    flex: none;
}

请参阅小提琴：http://jsfiddle.net/1djb153n/2/

还有其他的justify-content变体，请参见此处：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

有关浏览器支持，请参阅此处：http://caniuse.com/#feat=flexbox

Answer 2

Justify在最后一行不起作用。为了强制它起作用，最后添加<br />！这是 hack ！

<div class="bespokeimages">
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <br />&nbsp;
</div>

小提琴http://jsfiddle.net/praveenscience/1djb153n/1/

或使用跨浏览器方法：

.bespokeimages {
  text-align: justify;
  text-align-last: justify;
}

.bespokeimages:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<div class="bespokeimages">
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>

Answer 3

来自CSS Text Level 3 working draft：

  

<强>对齐

     

根据text-justify属性指定的方法对文本进行对齐，以便精确填充行框。除非text-align-last另有指定，否则强制中断之前的最后一行或块的结尾都是开始对齐的。

因为这是最后一行，所以图像被强制对齐到左边。

解决此问题的一种方法是使用:after伪元素添加额外的不可见最后一行：

• 使用.bespokeimages:after和display: inline-block;添加width: 100%;，以便占用整个宽度并创建新行。因为inline-block text-align将被尊重
• 在对齐图片时，您可以将font-size: 0;添加到.bespokeimages，以确保空白占用空间并且图像正确对齐

.bespokeimages {
  font-size: 0;
  text-align: justify;
}
.bespokeimages:after {
  content: "";
  display: inline-block;
  width: 100%;
}

<div class="bespokeimages">
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>

Answer 4

如何使用图像的align属性。

img {
     align: middle;
}

http://jsfiddle.net/k0Lx18ma/

Answer 5

标记img是内联HTML元素。所以它的行为就像你拥有的任何文本一样。合理的纯文本也有最后一行不合理。

如果使用text-align: justify没有特殊限制，您只需将它们对齐到左边并指定边距：

.bespokeimages {
    text-align: left;
}

img {
    margin: 1em;
}

http://jsfiddle.net/t9pq73cq/

尝试调整窗口大小。

编辑：

最好使用text-align: center;。