为什么 `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

对齐在最后一行不起作用。为了强制它工作，最后添加一个<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-blocktext-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

标签img 是一个内联HTML 元素。因此，它的行为与您拥有的任何文本一样。对齐的纯文本的最后一行也没有对齐。

如果没有使用text-align: justify 的特殊限制，您可以简单地将它们左对齐并指定边距：

.bespokeimages {
    text-align: left;
}

img {
    margin: 1em;
}

http://jsfiddle.net/t9pq73cq/

尝试调整窗口大小。

编辑：

最好使用text-align: center;。

Answer 5

如何使用图像的对齐属性。

img {
     align: middle;
}

http://jsfiddle.net/k0Lx18ma/