A demonstration of simple ways to align images in a Ghost blog post.

We can put a man on the moon, but we can't seem to make it easy to align images in blog posts. Any time we get something that actually works, like the friendly <center> tag, it is snatched away by the purists who say it's unsemantic. Have they even looked at Bootstrap? Talk about unsemantic. But I digress.

The purpose of this post is to demonstrate various ways you can align your images in a Ghost blog post. Nothing fancy, just good, old-fashioned HTML, which Ghost handles beautifully. Personally, I don't see any good reason to learn the "markdown" way when HTML works fine, and will be around much longer than markdown.

When using the HTML <img> tag, what I do is upload my photo by clicking the little icon with the moutains and moon at the bottom of the Ghost editor. (See my first example, it was created that way.) That gives you a basic image aligned to the left, which nobody likes. So I copy the URL out of the markdown into an <img> tag, and delete the detritus. Not sayin' it's right, that's just how I do it.

So without further ado, here are some simple ways to align your images. I will put the code first, in the same order as the apples... you can figure it out.

![apple-1](/content/images/2018/03/apple.png)

<img src="/content/images/2018/03/apple.png" alt="apple" style="float:right; margin:1em;">

<img src="/content/images/2018/03/apple.png" alt="apple" style="float:left; margin:1em;">

<div style="text-align:center"><img src="/content/images/2018/03/apple.png" alt="apple" style="margin-bottom:1em; border:4px dotted lime"></div>

<figure style="text-align:center; margin:1em"><img src="/content/images/2018/03/apple.png" alt="apple"><figcaption style="font-size:smaller;">I am an apple with a caption!</figcaption></figure>

<img src="/content/images/2018/03/apple.png" alt="apple" style="position:absolute">

<img src="/content/images/2018/03/apple.png" alt="apple" width="20%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="15%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="10%" style="float:right"><img src="/content/images/2018/03/apple.png" alt="apple" width="5%" style="float:right">

apple-1

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.
apple
Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.

Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.
apple apple apple apple
Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla. Bla bla bla bla bla bla.