这是not working example.如果我们使用text-align:center;元素将居中,但边距:0自动;不管用。我想完成一些像对齐中心的东西:
|..<elem>..<elem>..<elem>..<elem>..| // for one container width |..<elem>..<elem>..<elem>..| // for smaller container width |....<elem>....<elem>....| // even smaller container
容器将被用户调整大小。
一张照片值得一千字:
容器(红色框)宽度:100%;所以用户可以调整大小(浏览器窗口,js,任何)。
< – >代表偶数空格。
在第二行中更大,因为有更多的空间。我能够伪造:
text-align:center; word-spacing:3em; // but any fixed value looses proportion
解决方法
简而言之,你只需要使用text-align:justify;在容器元素上实现这一点,结合一个额外的不可见块。
这是因为内联块元素被视为文本内容的一部分,每个元素实际上是单个单词。
使用对齐方式将展开文本中的单词,以便它们填充元素的整个宽度,并在单词之间增加空格。对于内联块元素,这意味着它们之间具有均匀间隔。
最后我提到一个额外的看不见的块。这是必需的,因为正常的text-align:对齐不会证明最后一行文本。对于正常文本,这正是你想要的,但是为了对齐内嵌框框,你希望它们都对齐。
解决方案是将额外的不可见但100%的宽度元素添加到内联块元素列表的末尾。这将成为文本的最后一行,因此,正当的技术将适用于其余的块。
您可以使用:after pseudo-selector来创建不可见元素,而无需修改标记。
这是您的jsFiddle的更新版本来演示:http://jsfiddle.net/ULQwf/298/
而这是原始文章,更详细地解释:http://www.barrelny.com/blog/text-align-justify-and-rwd/
[编辑]
查看您添加到该问题的图片后,最后一次更新。 (我没有一个更好的答案,但一些额外的想法可能是有用的)。
理想情况下,您需要的是一个最后一行选择器。然后你可以文本对齐:对齐主文本和text-align:居中的最后一行。那会做你想要的
可悲的是,最后一行不是一个有效的选择器((第一行是但不是最后一行),所以这是想法的结束。
更有希望的思想是text-align-last,它作为一个特征确实存在。这可以完全符合你想要的:
text-align:justify; text-align-last:center;
完善。
除非它是非标准的,并且浏览器支持非常有限。
我认为最后的手段可能是您的选择,如果您只能支持部分浏览器支持。至少会得到你想要的一些用户。但这并不是一个明智的做法。
我的直觉是,尽可能接近你要得到的。非常贴近您想要的,但不完全相同。我希望我被证明是错误的,但我会感到惊讶。太糟糕了,因为我似乎是一个完美的逻辑的事情要做。