Examples of useful html and css markup

Centering an Image with Caption

Caption for Image

<figure> 
     <img src="/images/logo.png" class="hcenter"> 
     <figurecaption>CCSCSL Logo</figurecaption>
</figure>

Centering Text

This is a centered paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<p class="hcenter">This is a centered paragraph. (.....)</p>

Centering Things Vertically

<div class="vcenter"><p>Vertically centered in the div 
(a block-level element)></p></div>

Centering Things Vertically & Horizontally

<div class="centerall"><p>Vertically & horizontally centered text></p></div>

Centering Things Vertically & Horizontally

<div class="centerall"><p>Vertically & horizontally centered text></p></div>

Centering Things Vertically & Horizontally

<div class="centerall"><p>Vertically & horizontally centered text></p></div>

Quotes

“You have brains in your head. You have feet in your shoes., said Dr. Seuss. You can steer yourself in any direction you choose. You’re on your own, and you know what you know. And you are the guy who’ll decide where to go.” — Dr. Seuss

<p><quote>"You have brains...", said Dr. Seuss. <quote>You can..."</quote> -- Dr. Seuss</p>

Block Quotes

“You have brains in your head. You have feet in your shoes. You can steer yourself in any direction you choose. You’re on your own, and you know what you know. And you are the guy who’ll decide where to go.” — Dr. Seuss

<blockquote>"You have brains..."</blockquote>