当前位置: 动力学知识库 > 问答 > 编程问答 >

css - text-align: justify and images

问题描述:

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>

My CSS:

div { width: 30em; }

p { text-align: justify; }

网友答案:

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

Happy coding ! :)

网友答案:

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.

See 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>​
网友答案:

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 &nbsp;.) This is a bit of a nasty hack.

网友答案:

I realise this is way out of date but just thought I'd add a simple solution.
text-align: justify will 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:

$.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();
网友答案:
    <!-- 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; }
网友答案:

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

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;

  1. There must be an ID of the div (imageContainer)
  2. All the images must have the same width
  3. 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.

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.

Hope it helps!

网友答案:

study CSS more, text-align does not apply to any elements except inline text.

there is no way you can evenly distribute images without doing some math, basically start with float: left; and if you have e.g. 3 images in a row, you need to set a border with one third of percentages set for borders for each image. if you have four images, than divide by four.

分享给朋友:
您可能感兴趣的文章:
随机阅读: