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.
I will assume in this article that you have some basic knowledge of HTML and CSS, and know how to insert CSS code into a web page.
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.
The standard method for centring ("centering") a picture with CSS is as follows:
Make the <img> tag in question into a block level tag.
Specify a width that is less than 100% of the width of the container holding the image.
In this context, when I say container, I mean the space into which the image is placed. For example, if your image is inserted in one of the columns of a two column page, then the container is that column. If it is placed within a box (like the box that you see around this paragraph), the container is the box. Otherwise, if the image is not enclosed within another block tag at all, the container is the entire web page. The width must be less than the container's width, since centring only makes sense if the object is smaller than the enclosing space.
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.
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 container into which it is placed.
#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 container's width.
The following image was centred using the CSS code given above. It should appear in the centre of the right column of this page.
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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Centre an Image with CSS
