Clever Geek Handbook

Why does "text-align: justify" only work on the first line of images?

I have several images that span two lines. I want them to have an even space.

I tested with text-align: justify but that doesn't work on the last lines for some reason (tested with Chrome). Does anyone know why this is happening and how to fix it?

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


source to share


5 answers


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 justification-content options, see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

+3


source


The alignment doesn't work on the last line. To make it work, add <br />

at the end! It's 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>
Run codeHide result


+2


source


From CSS Text Level 3 Working Draft :

Justify

The text is justified according to the method specified by the text-justify property to accurately fill the string field. Unless text-align-last is specified otherwise, the last line before a forced break or the end of a block is top-aligned.

Since this is the last line, images are forced left-justified.

One way is to add an extra invisible last line using a pseudo-element :after

:

  • Add .bespokeimages:after

    with display: inline-block;

    and width: 100%;

    so that it can take up the entire width and create a new line. Because it inline-block

    text-align

    will be done
  • When aligning images, you can add font-size: 0;

    in .bespokeimages

    to make sure whitespace is not taking up 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>
Run codeHide result


+2


source


How to use the align property for an image.

img {
     align: middle;
}

http://jsfiddle.net/k0Lx18ma/

enter image description here

0


source


The tag img

is an inline HTML element. Thus, it behaves just like any text. Plain text that is justified also has the last line not justified.

If text-align: justify

there is no specific limitation to use , you can simply left-align them and specify the margin:

.bespokeimages {
    text-align: left;
}

img {
    margin: 1em;
}

http://jsfiddle.net/t9pq73cq/

Try resizing the window.

EDIT:

Better to use text-align: center;

.

0


source






More articles:


All Articles