Text-Align: Justify and Images

Center image using text-align center?

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

img.center {    display: block;    margin: 0 auto;}

<div style="border: 1px solid black;"><img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

Vertically align text next to an image?

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

How do I center AND justify text, like in this image?

It's not a real solution, as it seems this is experimental and only works in firefox and explorer:

-moz-text-align-last: center;
text-align-last: center;

See: https://developer.mozilla.org/es/docs/CSS/text-align-last

How can I center an image and place text under it to the left or right?

Is this the kind of thing you are thinking of?

I've just added display: flex to the wrapper and then flex-direction: column makes sure that they are stacked in a column (not a row).

You can then change text-align property on the b to whichever you'd like (left, center or right).

p {  display: flex;  flex-direction: column;  width: 600px;  margin: auto;}
img {  width: 600px;  height: 150px;}
b {  text-align: left;}

<p align="center"><img src="http://via.placeholder.com/600x150">  <b>text under it</b></p>

How to add text-align justify in Pillow?

I don't believe there is an option like text-align: justify in pillow but you can do this by hard coding what you need.

code:

from PIL import Image, ImageDraw, ImageFont
import textwrap

im = Image.new('RGB', (200, 200), (0, 0, 0, 0))
draw = ImageDraw.Draw(im)

astr = 'Python '
font = ImageFont.truetype('arial.ttf', 15)
num_row = 4

draw.text((0,0), astr * num_row, font=font)
draw.text((0,30), astr * num_row, font=font)
draw.text((0,60), astr * num_row, font=font)
draw.text((0,90), astr * num_row, font=font)
draw.text((0,120), astr * num_row, font=font)
draw.text((0,150), astr * num_row, font=font)
draw.text((0,180), astr * num_row, font=font)
im

Output:

Output

Note - you can change the font size and how many times python appears in each line to make it fit for your wanted image.

Justify images CSS

To make justify property works as do in the alignment of texts you will need to make the li items inline-block elements. Try this:

ul {
  text-align: justify;
}
ul > li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

* {  margin: 0;  padding: 0}ul {  background: red;  padding: 40px;  box-sizing: border-box;  text-align: justify;}ul > li {  display: inline-block;}ul:after {  content: '';  display: inline-block;  width: 100%;}

<ul id="Grid">  <li>    <img class="uspIconOntwerp" src="images/ontwerp-icon.png" />    <div class="uspText">Ontwerp</div>  </li>  <li>    <img class="uspIconRealisatie" src="images/realisatie-icon.png" />    <div class="uspText">Realisatie</div>  </li>  <li>    <img class="uspIconPrijs" src="images/prijs-icon.png" />    <div class="uspText">Betaalbare prijs</div>  </li></ul>