text-align：对齐和图像 [英] text-align: justify and images

问题描述

我有一个图像列表（不在列表中，但可能是如果这可能解决问题），我想填充一个div的整个宽度。我试过在底部的代码，虽然它证明任何文本的p标签，它不会做同样的图像。

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

推荐答案

p>

The simplest way to make it is :

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

<p class="justify-image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
    <img src="/path/img.jpg" alt="my image">
</p>

1. 您需要一个容器 text-align：justify;


2. 您的图片必须是 display：inline-block; ，否则他们不会以文字


3. 您的图片下方需要一行文本以证明适用，使用伪元素可以实现可以很容易地创建一个* ：之后

1. You need a container with text-align:justify;, 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 apply, with pseudo-element you can achieve it easily by creating a *:after

*：after：
不要忘记内容：;没有它它不会出现。在我的例子中，我使用了一个内联块，宽度100％。它将总是在我的段落中的内容之后。

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

快乐编码！ ：）

这篇关于text-align：对齐和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！