CSS 文本对齐：对齐和图像

Question

提问by chrism

I have a list of images (not in a list, but could be if that might solve the problem) that I want to fill the whole width of a div. I've tried the code at the bottom, and while it does justify any text in the p tag it doesn't do the same for images. How can I get it to evenly space the images across the full width of the div?

我有一个图像列表（不在列表中，但如果这可以解决问题，则可能是）我想填充 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>

My CSS:

我的CSS：

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

Answer 1

回答by Cstyves

The simplest way to make it is :

最简单的制作方法是：

.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;text-align:justify;（<p><p>在这种情况下是一个段落。）

2. 您的图像需要display:inline-block;display:inline-block;否则它们将不会作为“文本”进行交互（在对齐文本的最后一行不受影响，您需要添加一个才能使其工作。）

3. 您需要在图像下方一行“文本”以证明应用的合理性，并带有伪 -元素，您可以通过创建 * 轻松实现它:after:after.

*:after:
Don't forget content:"";. Without it, it will not appear. In my example I've used an inline-blockwith width:100%. It will always break the line after the content in my paragraph.

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

Happy coding ! :)

快乐编码！:)

Answer 2

回答by dippas

Because no one mention in the previous answers. Nowadays (2017) and for awhile ago you can use CSS3 flexbox, by applying the property justify-content:space-between

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

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>

Answer 3

回答by Matt Esch

Images are displayed inline so you might as well use the text-align:justify css property to align your images with css. As others suggest, if you want to justify the final row you will have to insert some sort or blank image that takes up the full width at the end of your image list.

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

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

见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>?

Answer 4

回答by goangus

I realise this is way out of date but just thought I'd add a simple solution.
text-align: justifywill only work if there is more than one line (if you use this on a paragraph of text, you will see that the last line does not justify). This little jQuery extention will add an invisible element to the element you are trying to justify and thus, your images will be evenly spread:

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

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

Then all you need to do is call:

然后你需要做的就是调用：

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

Answer 5

回答by bobince

In justified text, the last line of text in a paragraph is not expanded to fill the whole width. So to make the inline images spread out you need enough content to pull the paragraph out to two or more lines, eg.:

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

<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>

(or some other equally-ugly but less-visible version involving  .) This is a bit of a nasty hack.

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

Answer 6

回答by Karl Johan

This javascript will spread the images over the div from the middleand to the sides:

这个 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"
}

The script asume a couple of things;

脚本假设了一些事情；

There must be an ID of the div (imageContainer)
All the images must have the same width
For my convinience I only tested in IE7, there are things that I'm not sure about such as "offsetWidth" that may be different in Firefox etc. but this is mostly for you to get the concept of the script.

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

You could of course add support for variable image widths and so forth, but that wasn't really in the scope here.

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

This script will distribute the images evenly if you add or remove images, ofcourse to a limit. If the total width of the images is greater than the width of the div, there will be wrapping.

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

Hope it helps!

希望能帮助到你！

Answer 7

回答by anonym

    <!-- 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; }

CSS 文本对齐：对齐和图像

提问by chrism

回答by Cstyves

回答by dippas

回答by Matt Esch

回答by goangus

回答by bobince

回答by Karl Johan

回答by anonym

相关推荐

最近更新

标签

CSS 文本对齐：对齐和图像

提问by chrism

回答by Cstyves

回答by dippas

回答by Matt Esch

回答by goangus

回答by bobince

回答by Karl Johan

回答by anonym

相关推荐

CSS 边框小于 1px

CSS：当父母没有边框时的边距顶部

CSS 字体“Futura”不适用于任何 PC

CSS 有没有办法用CSS隐藏列表中的第n个项目？

相关推荐

最近更新

标签