logo标签列表

文本对齐: 两端对齐 和 图片

css
11
我有一组图片（并非在列表中，但如果可以解决问题的话也可以放在列表中），我想填充一个
元素的整个宽度。我已经尝试了底部的代码，虽然它确实对

标签中的任何文本进行了对齐，但对于图片却没有同样的效果。如何才能让它将图片均匀地分布在

的整个宽度上？
<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; }
忘记添加：图片数量不固定，因此我希望有一种不依赖于知道有多少张图片的解决方案。 - chrism
正如我在答案中所写的，如果你愿意使用JavaScript，我提供的答案可以适应任意数量的图像。 - Karl Johan
7个回答
21

最简单的方法是：

.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. You need a container with text-align:justify; (a <p> paragraph in this case.)
2. Your images need to be display:inline-block; else they will not interact as "text" (in justify text last line is not affected you need to add one to make it works.)
3. You need a line of "text" under your images for justifying to apply, with pseudo-element you can achieve it easily by creating a *:after.

*:after：
不要忘记 content:"";。没有它，它将不会出现。在我的示例中，我使用了一个带有 width:100% 的 inline-block。它将始终在我的段落内容后换行。

编码愉快！ :)

完美 :) 这正是我在寻找的！ - nbsp
1
这应该是答案。 - a.barbieri
对我来说可行，但请确保没有其他元素使用了:after特性。 - Savage
谢谢！似乎使用inline-block与不使用它的效果相同。 - ashleedawg
7

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

div {
  display: flex;
  justify-content: space-between
}
<div>
  <img src="https://picsum.photos/50" alt="foo" />
  <img src="https://picsum.photos/50" alt="foo" />
  <img src="https://picsum.photos/50" alt="foo" />
  <img src="https://picsum.photos/50" alt="foo" />
  <img src="https://picsum.photos/50" alt="foo" />
</div>

1
感谢您提供更更新的答案！（2021年，哈哈）。点赞以增加曝光率。 - Pixelsage
1
这就是我正在寻找的。 - Noryn Basaya
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>​
2

我知道这篇文章有点过时了，但我想提供一个简单的解决方案。
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();
2
在两端对齐的文本中，段落中的最后一行文本不会扩展以填充整个宽度。因此，为了使内联图片分散开，您需要足够的内容来将段落拖出到两行或更多行，例如：
<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;。) 这是一个有点恶劣的hack。

你可以使用 <span style="visibility:hidden">&nbsp;&nbsp;...</span>。 - DisgruntledGoat
0
    <!-- 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; }
0
这段 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"
}

脚本假设了几件事情：
  1. div元素必须有一个ID（imageContainer）
  2. 所有的图片必须具有相同的宽度
  3. 为了方便起见，我只在IE7中进行了测试，有些事情我不确定在Firefox等其他浏览器中是否相同，但这主要是为了让您理解脚本的概念。
当然，您可以为不同宽度的图像添加支持等等，但这并不在此范围内。
如果您添加或删除图像，此脚本将使图像均匀分布，当然有限制。如果图像的总宽度大于div的宽度，则会换行。
希望对您有所帮助！
尝试使用CSS布局图像后再使用JS，不要仅依赖于JS！ - dusoft
这是一个不错的解决方案！但仅适用于一行图像的情况。这能扩展到多行情况吗？ - my account_ram
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接