Caption position

Is the caption above or below the image?

Like this:

Bulldog

Or like this:

Bulldog

Here’s the code for the latter:

<p><img src="bulldog.jpg" alt="Bulldog"></p>
<p>Bulldog</p>

Image block position

Wrap the image and caption in a block, and you can position them in the page.

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Of course, you can float to the right as well.

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Here’s the code.

.image_caption_right {
  float:right;
  text-align:center;
  margin-left:10px;
}
...
<div class="image_caption_right">
<img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"><br>
Bulldog
</div>

<p>Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! </p>

The easiest thing of all is to center the image:

Bulldog

Here’s the code.

.center {
  text-align:center;
}
...
<p class="center"><img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"></p>
<p class="center"><em>Bulldog</em>

Borders

Let’s add a border to the image-caption block.

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah! Blah blah blahity blah. Blahity blah blah. Blah!

Here’s the code.

.image_caption_left {
  float:left;
  text-align:center;
  margin-right:10px;
  padding:5px;
  border:1px black dotted;
}
...
<div class="image_caption_left">
<img src="/content_media/lessons/clientcore/web_page_with_images/bulldog.jpg" alt="Bulldog"><br>
<em>Bulldog</em>
</div>

<p>Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! 
Blah blah blahity blah. Blahity blah blah. Blah! </p>