文本对齐：对齐和图像答案

【问题标题】：text-align: justify and images文本对齐：对齐和图像
【发布时间】：2009-09-23 09:29:14
【问题描述】：

我有一个图像列表（不在列表中，但如果这可以解决问题的话），我想填充 div 的整个宽度。我已经尝试了底部的代码，虽然它确实证明了 p 标签中的任何文本，但它对图像的作用并不相同。如何让它在 div 的整个宽度上均匀分布图像？

<div>
  <p>
    <img src="image1.png" alt="foo" />
    <img src="image2.png" alt="foo" />
    <img src="image3.png" alt="foo" />
    <img src="image4.png" alt="foo" />
    <img src="image5.png" alt="foo" />
  </p>
</div>

我的 CSS：

div { width: 30em; }
p { text-align: justify; }

【问题讨论】：

忘了补充：图片的数量不固定，所以我想要一个不依赖于知道会有多少的解决方案。
正如我在回答中所写，如果您愿意使用 javascript，我提供的答案会针对任意数量的图像进行调整。

标签： css

【解决方案1】：

最简单的方法是：

.justify-image{ text-align: justify;}
.justify-image img{display:inline-block;}
.justify-image:after{content:""; display: inline-block; width: 100%; height: 0;}

<p class="justify-image">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">
  <img src="https://via.placeholder.com/150x40" alt="my img">

</p>

1. 您需要一个带有 text-align:justify; 的容器（在本例中为 <p> 段落。）
2. 您的图片必须是 display:inline-block; 否则它们不会作为“文本”进行交互（在对齐文本的最后一行不受影响，您需要添加一个才能使其正常工作。）
3. 你需要在你的图片下面有一行“文本”来证明应用的合理性，使用伪元素你可以很容易地通过创建一个 *:after 来实现它。

*:after :
不要忘记content:"";。没有它，它就不会出现。在我的示例中，我使用了 inline-block 和 width:100%。它总是会在我的段落内容之后换行。

编码愉快！ :)

【讨论】：

完美 :) 这正是我想要的！
这应该是答案。
为我工作，但确保没有其他元素使用 :after 功能
谢谢！不管有没有inline-block，它似乎也一样

【解决方案2】：

因为之前的答案中没有人提到。现在（2017 年）和不久前，您可以通过应用属性 justify-content:space-between 来使用 CSS3 flexbox

div {
  display: flex;
  justify-content: space-between
}

<div>
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
  <img src="//placehold.it/50" alt="foo" />
</div>

【讨论】：

感谢您提供更新的答案！（这里是 2021 年，哈哈）。为知名度投票。
这就是我要找的。span>

【解决方案3】：

图像是内联显示的，因此您不妨使用 text-align:justify css 属性将图像与 css 对齐。正如其他人建议的那样，如果您想证明最后一行的合理性，您必须在图像列表的末尾插入一些占据整个宽度的排序或空白图像。

见http://fiddle.jshell.net/ewv6K/show/

<!DOCTYPE html>
<title>
    Justified Images example
</title>
<style>
    body {
        text-align:center;
    }
    #container {
        width:800px;
        text-align:justify;
        margin-left:auto;
        margin-right:auto;
    }
    #force {
        width:100%;
        height:0px;
    }
</style>
<div id="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6">
    <!-- Force the last row to be justifed - use a blank image here, not a real one like I have -->
    <img id="force" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="end">
</div>

【讨论】：

【解决方案4】：

在两端对齐的文本中，段落中的最后一行文本不会扩展以填满整个宽度。因此，要使内联图像展开，您需要足够的内容来将段落拉到两行或多行，例如：

<div>
    <p>
        <img src="image1.png" alt="foo" />
        <img src="image2.png" alt="foo" />
        <img src="image3.png" alt="foo" />
        <img src="image4.png" alt="foo" />
        <img src="image5.png" alt="foo" />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
</div>

（或其他一些同样丑陋但不太明显的版本，涉及&nbsp;。）这有点令人讨厌。

【讨论】：

你可以使用<span style="visibility:hidden">&nbsp;&nbsp;...</span>

【解决方案5】：

我意识到这已经过时了，但我只是想添加一个简单的解决方案。
text-align: justify 仅在多行时才有效（如果您在一段文本中使用它，您会看到最后一行不合理）。这个小小的 jQuery 扩展将为您试图证明的元素添加一个不可见的元素，因此，您的图像将均匀分布：

$.fn.justify = function() {
 $(this).css("text-align", "justify");
 $(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>");
}

那么你需要做的就是调用：

$("#your-element").justify();

【讨论】：

【解决方案6】：

这个 javascript 会在 div 上从中间到两边展开图像：

var container = document.getElementById("imageContainer");
var imageList = container.getElementsByTagName("img");

var totalWidth = container.offsetWidth;
var sliceWidth = totalWidth/imageList.length;

for( i = 0; i < imageList.length; i++)
{
  var totalMargin = sliceWidth - imageList[i].offsetWidth;
  var margin =  totalMargin / 2;

  imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px"
}

脚本假设了几件事；

div（imageContainer）必须有ID
所有图片的宽度必须相同
为了方便起见，我只在 IE7 中进行了测试，有些东西我不确定，例如“offsetWidth”在 Firefox 等中可能有所不同，但这主要是为了让您了解脚本的概念。

您当然可以添加对可变图像宽度等的支持，但这实际上不在此处的范围内。

如果您添加或删除图像，此脚本将均匀分布图像，当然有限制。如果图片的总宽度大于div的宽度，就会出现换行。

希望对你有帮助！

【讨论】：

只有在尝试通过CSS布局图片后才使用JS，不要只依赖JS！
这是一个不错的解决方案！但只有在有一行图像时才有效。这也可以扩展到多行情况吗？

【解决方案7】：

    <!-- not elegant -->
    <div style="color:backgroundcolor">
      <p>
       <img src="image1.png" alt="foo" 
       /><em>.</em>
       <img src="image2.png" alt="foo"
       /><em>.</em>
       <img src="image3.png" alt="foo"
       /><em>.</em>
       <img src="image4.png" alt="foo"
       /><em>.</em>
       <img src="image5.png" alt="foo" />
      </p>
     </div>

    My CSS:

    div { width: 30em; }
    p { text-align: justify; }

【讨论】：