float / align left

float left

Need your images on the left? No problem… Here is how to do it and have it look fabulous.

left { 
    float: left; 
    margin: 5px; 
}

center align

center horizontal
Need your image to stay in the middle of an area?

center { 
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

float / align right

float right

Need your images on the right? No problem… Here is how to do it and have it look great.

right { 
    float: right; 
    margin: 5px; 
}

Align to the top

top verticalText up top.

Aligning text to the top of an image.

top {
vertical-align:top;
}

center text (vertical)

center horizontalText in middle of image.

Make your text line up to the middle of an image.

middle {
    vertical-align:middle;
    margin: 5px;
}

Align to bottom

bottom verticalText to bottom.

Make your text align with the bottom of an image.

bottom {
vertical-align:baseline;
}