3

I have several images that span two lines. I want to be able to space them out evenly.

I tested using text-align:justify, but this for some reason doesn't work on the last lines (Tested with Chrome). Does anyone know why this happens and how to correct ?

Resize the demo window so that the images wrap to another line.

JSFIDDLE: http://jsfiddle.net/1djb153n/

HTML:

<div class="bespokeimages">
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>

CSS:

.bespokeimages {
    text-align:justify;
}
user2924019
  • 1,983
  • 4
  • 29
  • 49
  • this being images offers other solutions like the flexbox one - which is not possible in pure text - and other applications, like divs as children! – Remigius Stalder Jun 12 '15 at 13:48

5 Answers5

3

try with flexbox (same HTML):

.bespokeimages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.bespokeimages img {
    flex: none;
}

see fiddle: http://jsfiddle.net/1djb153n/2/

there are other variants of justify-content, see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

for browser support, see here: http://caniuse.com/#feat=flexbox

Remigius Stalder
  • 1,921
  • 2
  • 26
  • 31
2

Justify doesn't work on the last line. In order to force it to work, add a <br /> in the end! This is a hack!

<div class="bespokeimages">
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
    <br />&nbsp;
</div>

Fiddle http://jsfiddle.net/praveenscience/1djb153n/1/

Or use a cross-browser method:

.bespokeimages {
  text-align: justify;
  text-align-last: justify;
}

.bespokeimages:after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div class="bespokeimages">
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
2

From the CSS Text Level 3 working draft:

Justify

Text is justified according to the method specified by the text-justify property, in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned.

As this is the last line the images are forced to be aligned to the left.

One way around this is to add an extra invisible last line by using an :after pseudo element:

  • Add .bespokeimages:after with display: inline-block; and width: 100%; so it can take up the full width and create a new line. Because it is inline-block text-align will be honoured
  • As you are aligning images you can add font-size: 0; to .bespokeimages to ensure that whitespace takes up no space and the images are aligned correctly

.bespokeimages {
  font-size: 0;
  text-align: justify;
}
.bespokeimages:after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div class="bespokeimages">
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
  <img src="http://dummyimage.com/300x300/e6e6e6/7a7a7a" />
</div>
Hidden Hobbes
  • 13,893
  • 3
  • 38
  • 64
0

How about using the align property for an image.

img {
     align: middle;
}

http://jsfiddle.net/k0Lx18ma/

enter image description here

Michael Bellamy
  • 543
  • 1
  • 8
  • 16
  • This didn't work in Chrome. – user2924019 Jun 12 '15 at 10:57
  • That's strange as I'm using chrome. Version 43.0.2357.124 m and it works fine for me. – Michael Bellamy Jun 12 '15 at 11:12
  • 1
    @MichaelBellamy I'm afraid `align` isn't a valid CSS property. The result you are seeing is the images being aligned to the default left. – Hidden Hobbes Jun 12 '15 at 11:27
  • The effect achieved is what the original poster wanted (or so I thought) :) http://www.w3schools.com/tags/att_img_align.asp – Michael Bellamy Jun 12 '15 at 13:01
  • 2
    @MichaelBellamy I can see why it may appear that way at the particular window size in your screenshot, but if you increase the width you will see that they are aligned to the left. You may want to take another look at the link as it refers to an element attribute not a CSS property. ;) – Hidden Hobbes Jun 12 '15 at 13:20
0

The tag img is an inline HTML element. So it behaves just as any text you would have. Plain text that is justified has also the last line not justified.

If there is no special constraint for using text-align: justify you can simply align them to the left and specify the margin:

.bespokeimages {
    text-align: left;
}

img {
    margin: 1em;
}

http://jsfiddle.net/t9pq73cq/

Try to resize the window.

EDIT:

It is better to use text-align: center;.

cezar
  • 11,616
  • 6
  • 48
  • 84
  • This is a good try, although it doesn't center the images out as I would have liked, it also means using a margin which is not needed. – user2924019 Jun 12 '15 at 10:59
  • Using `text-align: center` will center the images. You can omit the margin, but it gives some extra space, so the images don't stick to close together. – cezar Jun 12 '15 at 11:04