You are here:Home»KB»Web Design»HTML»Centre an image
Sunday, 13 December 2015 10:41

Centre an image

Written by

Thre are 2 ways to center and image, the old way and the new way. You can still use both.

Old Way

cat whiskers kitty tabby 200x200

<p style="text-align: center;"><img src="/images/kb/2015/666/cat-whiskers-kitty-tabby-200x200.jpg" alt="cat whiskers kitty tabby 200x200" /></p>
  • This is the method used from before time. You put style="text-align: center;" in the parent element which then centers the immediate child, in this case it is an image.
  • text-align works on inline elements.

New Way

cat whiskers kitty tabby 200x200

<p><img src="/images/kb/2015/666/cat-whiskers-kitty-tabby-200x200.jpg" alt="cat whiskers kitty tabby 200x200" style="display: block; margin-left: auto; margin-right: auto;" /></p>
  • This method utilises style="margin: auto auto;" and works most of the time. You need to make sure the element you are centering has a set size, a block elemment. Also the centering in performed on the element itself in relation to its parent.
  • margin: auto auto works on block level elements.
Read 1060 times Last modified on Sunday, 13 December 2015 17:17