How to centre an image in CSS

CSS-LogoCentering text in CSS is relatively easy. All you do is add the “text-aling: center” property.

If you’ve ever tried this with anything that isn’t text you’ll have noticed that this approach doesn’t work.

Instead, display your class as a block, then set the margins to auto. You also need to specify a width so the rest flows around this fixed parameter:

.yourclass {
	margin-left:auto;
	margin-right:auto;
	width: 400px;
	display:block;
}

This approach works with everything that is not text such as images.

Thanks to Bert Bos for this tip!





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.