text-align: justifier et images

J'ai une liste d'images (pas dans une liste, mais qui pourraient l'être si cela peut résoudre le problème) que je veux remplir toute la largeur de la div. J'ai essayé le code en bas, et alors qu'il ne justifier le texte dans la balise p il ne veut pas faire de même pour les images. Comment puis-je obtenir à espacer correctement les images sur toute la largeur de la 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>

Mon CSS:

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

source d'informationauteur chrism | 2009-09-23

css

17

La façon la plus simple de le faire est :
```
<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. Vous avez besoin d'un conteneur avec text-align:justifier;le Paragraphe dans ce cas.
2. Vos images doivent être display:inline-block; d'autre, ils ne seront pas interagir en tant que "texte" (en justifier le texte de la dernière ligne n'est pas affecté, vous devez ajouter un à faire il fonctionne)
3. Vous avez besoin d'une ligne de "texte", en vertu de vos images pour les justifier, s'appliquent, avec les pseudo-élément, vous pouvez atteindre facilement par la création d'un *:after
*:après :
N'oubliez pas content:""; sans elle, il n'apparaîtra pas. Dans mon exemple j'ai utilisé un inline-block, une largeur de 100%. Il sera toujours le saut de ligne après le contenu de mon paragraphe.

Bon codage ! 🙂

Images sont affichées en ligne, de sorte que vous pourriez aussi bien utiliser le text-align:justifier d'une propriété css pour aligner vos images avec les css. Comme d'autres suggèrent, si vous voulez justifier la dernière rangée, vous devez insérer une sorte ou d'image vide qui prend toute la largeur, à la fin de votre liste d'images.

Voir 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

Dans un texte justifié, la dernière ligne de texte dans un paragraphe n'est pas développée pour remplir toute la largeur. Afin de rendre les images en ligne de propagation, vous avez besoin de suffisamment de contenu pour tirer le paragraphe à deux ou plusieurs lignes, par exemple.:
```
<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>
```
(ou une autre tout aussi laid mais moins visibles version impliquant  .) C'est un peu un vilain hack.
2

Je sais que c'est le cas, mais juste pensé que je voudrais ajouter une solution simple.

text-align: justify ne fonctionnera que si il n'y a plus d'une ligne (si vous l'utilisez sur un paragraphe de texte, vous verrez que la dernière ligne ne justifie pas). Ce petit jQuery extension va ajouter un élément invisible à l'élément que vous essayez de justifier et donc, vos images seront répartis de façon égale:
```
$.fn.justify = function() {
$(this).css("text-align", "justify");
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>");
}
```
Alors tout ce que vous devez faire est d'appeler:
```
$("#your-element").justify();
```
0

Ce javascript permettront de répartir les images sur le div du middleand sur les côtés:
```
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"
}
```
Le script asume un couple de choses;
1. Il doit y avoir une ID de la div (imageContainer)
2. Toutes les images doivent avoir la même largeur
3. Pour mon goût j'ai testé uniquement dans IE7, il y a des choses que je ne suis pas sûr de ce genre de "offsetWidth" qui peut être différent dans Firefox, etc. mais c'est surtout pour vous d'obtenir le concept de script.
Vous pouvez bien sûr ajouter le support de l'image variable largeurs et ainsi de suite, mais ce n'était pas vraiment dans le champ d'application ici.

Ce script se chargera de distribuer les images uniformément si vous ajoutez ou supprimez des images, bien sûr à une certaine limite. Si la largeur totale des images est supérieure à la largeur de la div, il y aura de l'emballage.

Espère que cela aide!

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

Vous devez vous connecter pour publier un commentaire.