Walker News

Using HTML-CSS To Align Image To Centre Of Web Page

At some occasion, I would like an image less than 400px in width to appear in centre of post body. However, this never happen in WalkerNews.net until today, as I was figuring how to make it with CSS syntax :-(

Yes, this is going to change now. Indeed, I have just made it happen in the earlier post published few hours ago.
As a matter of personal preference, image less than half of post body width will be aligned to either left or right and rendered inline of words.

Image that is two-thirds of post body width but less than 500px, I would like to appears in centre. However, for the purpose of demonstration, the following WN’s mascot is centred anyway:

HTML-CSS Align syntax to centre image in web page / post body
 <div style="text-align:center;"> HTML image tag placed here </div>

The <div></div> is a HTML tag, a block element. When using with CSS text-align property, it perfectly position the enclosed content at wish :-).

Result of CSS Align syntax used to align image to center

WalkerNews Mascot

So, that’s how to use HTML-CSS syntax (div tag and text-align property to centre an image or a block of string in the web page.

FYI, the animal of WN’s mascot is called meerkat, a small mammal of the mongoose family.

Custom Search

2017  •  Privacy Policy