How to Centre an Image with CSS

How to Horizontally Centre (Center) a Picture


How to Centre an Image with CSS

by Christopher Heng, thesitewizard.com

This article deals with how you can put an image in the centre ("center" in US English) of a web page, along its horizontal axis, using CSS.

Assumptions

I will assume in this article that you have some basic knowledge of HTML and CSS.

If this is not true, and you normally use a visual (or WYSIWYG) web editor to design your website, you may want to look at one of my tutorials for those editors. You can usually find information on how to insert and centre an image in chapter 2 of the main tutorial series for that editor.

Steps to Horizontally Centring an Image

The standard method for centring ("centering") a picture with CSS is as follows:

  1. Make the <img> tag in question into a block level tag.

  2. Specify a width that is less than 100% of the browser width.

  3. Set the left and right margins to auto.

Take the following HTML code as an example. Note that for the purpose of this tutorial, I have omitted attributes on the <img> tag that you will normally add but that are irrelevant to our discussion.

<img src="demo.png" id="demo">

If the image has a width of (say) 202 pixels, the following CSS code will put it in the middle of the horizontal axis of the page.

#demo {
  width: 202px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

All the above properties need to be set. If you don't specify the display: block property, the image will default to being an inline element. Centring only makes sense on things that are block level, else it would be expected to just flow with whatever came before and after. Setting both margins to auto causes the browser to put an equal amount of space on the object's left and right, and this can only be done if its width is known, and is less than 100% of the window width.

Demo

The following image was centred using the CSS code given above. It should appear in the centre of the right column of this page.

Logo for thesitewizard.com

Browser Support

The above standards-compliant CSS code should work in all current browsers. In fact, it even works in many obsolete browsers, including as far back as Internet Explorer 6 (and probably earlier browsers too).

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Centre an Image with CSS





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.