Image Positioning / Alignment

A million sorries for Jin for positng this help article late! Sorry *sobs*!

Have problem aligning photos beside your text as what I do in my posts? Actually it all depends on a very simple code. The code have 2 variables – “left” and “right”. Here is the code, with the image code:

<img src=”your image url” align=”*” vspace=”#” hspace=”#“>

Well, you can replace the your image url with your own image url, and * with wither the word left or right. Inserting the variable left will make the image be placed on the left side of the page, and right for the opposite result.

For the #, it means the spacing vertically (vspace) and horizontally (hspace), means the space surrounding the image that separates it with the text. I storngly recommend for you to use 5 as it looks the best in any websites, as it is seperates the image from the text neither too much nor too little.

WARNING: Remember to place this tag before the text where you want it to appear!

Tutorials can be seen below:

<img src=”your image url” align=”left” vspace=”5″ hspace=”5″>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a quam vitae sem ultrices euismod. Ut condimentum ante et urna. Vestibulum venenatis. Phasellus nec ante. Ut sed arcu sit amet nulla facilisis pulvinar. Phasellus non lectus sodales mi malesuada laoreet. Sed cursus, orci laoreet tincidunt convallis, leo purus scelerisque orci, eget elementum pede ipsum non nunc. Vestibulum viverra mi id lectus. Curabitur luctus massa feugiat lorem. Praesent ultrices pede non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<img src=”your image url” align=”right” vspace=”5″ hspace=”5″>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a quam vitae sem ultrices euismod. Ut condimentum ante et urna. Vestibulum venenatis. Phasellus nec ante. Ut sed arcu sit amet nulla facilisis pulvinar. Phasellus non lectus sodales mi malesuada laoreet. Sed cursus, orci laoreet tincidunt convallis, leo purus scelerisque orci, eget elementum pede ipsum non nunc. Vestibulum viverra mi id lectus. Curabitur luctus massa feugiat lorem. Praesent ultrices pede non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<img src=”your image url” align=”left” vspace=”5” hspace=”5“>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a quam vitae sem ultrices euismod. Ut condimentum ante et urna. Vestibulum venenatis. Phasellus nec ante. Ut sed arcu sit amet nulla facilisis pulvinar. Phasellus non lectus sodales mi malesuada laoreet. Sed cursus, orci laoreet tincidunt convallis, leo purus scelerisque orci, eget elementum pede ipsum non nunc. Vestibulum viverra mi id lectus. Curabitur luctus massa feugiat lorem. Praesent ultrices pede non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<img src=”your image url” align=”left” vspace=”20” hspace=”20“>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a quam vitae sem ultrices euismod. Ut condimentum ante et urna. Vestibulum venenatis. Phasellus nec ante. Ut sed arcu sit amet nulla facilisis pulvinar. Phasellus non lectus sodales mi malesuada laoreet. Sed cursus, orci laoreet tincidunt convallis, leo purus scelerisque orci, eget elementum pede ipsum non nunc. Vestibulum viverra mi id lectus. Curabitur luctus massa feugiat lorem. Praesent ultrices pede non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Cheers!

Need to know more about the paragraph of Lorem Ipsum I’m using? Click here to know more about it.