ITS

Information Technology Services
Information Technology Services

Image Alignments and Captions

The following HTML markup is available for your use in formatting images on your site. You can copy and paste it directly into your source code and customize the contents.


Image - Left-Aligned

Markup:

<div class="image-left">

<img alt="Queen's Campus" src="queens_campus.jpg" />

</div>

Example:

Queen's Campus

The HTML Markup provided above can be copied into your source code to align an image to the left of your page. Once added, add the source location of your picture and modify the alternative text.

Image - Right-Aligned

Markup:

<div class="image-right">

<img alt="Queen's Campus" src="queens_campus.jpg"/>

</div>

Example:

Queen's Campus

The HTML Markup provided above can be copied into your source code to align an image to the right of your page. Once added, add the source location of your picture and modify the alternative text.

Image - Center-Aligned

Markup:

<p style="text-align:center">

<img alt="Queen's Campus" src="queens_campus.jpg" />

</p>

Example:

Queen's Campus

The HTML Markup provided above can be copied into your source code to align an image to the center of your page. Once added, add the source location of your picture and modify the alternative text.

 

Image - Left-Aligned with Caption

Markup:

<div class="image-caption-left">
    <img alt="Queen's Campus" src="queens_campus.jpg"/>

    <div class="image-caption">
        Queen's Campus in the Spring
    </div>
</div>

Example:

Queen's Campus
Queen's Campus in the Spring

The HTML Markup provided above can be copied into your source code to align an image with a caption to the left of your page. Once added, add the source location of your picture and modify the alternative text, then specify your caption text.

Image - Right-Aligned with Caption

Markup:

<div class="image-caption-right">
    <img alt="Queen's Campus" src="queens_campus.jpg"/>

    <div class="image-caption">Queen's Campus in the Spring</div>
</div>

Example:

Queen's Campus
Queen's Campus in the Spring
 
The ​HTML Markup provided above can be copied into your source code to align an image with a caption to the right of your page. Once added, add the source location of your picture and modify the alternative text, then specify your caption text.

Image - Center-Aligned with Caption

Markup:

<div class="image-caption-center">
    <img alt="Queen's Campus" src="queens_campus.jpg" />

    <div class="image-caption">Queen's Campus in the Spring</div>
</div>

Example:

Queen's Campus
Queen's Campus in the Spring

The HTML Markup provided above can be copied into your source code to align an image with a caption to the center of your page. Once added, add the source location of your picture and modify the alternative text, then specify your caption text.