Question

How can I center an image in a Web page?

Answer

Centering an image (or any other element) has always been troubling in HTML, generally requiring off-by-one CSS hacks. A couple of years ago a new CSS layout style was introduced called "flex layout." This feature, which is now generally called "CSS Flex" or "CSS Flexbox", had spotty browser support at first, but has now matured to work on all major, current browsers (its implementation in IE 11 is spotty, but that isn't a "major, current browser"!). Flex offers a great way to center an element on a Web page. Read more about CSS Flex here.

This article shows how to center an image on a page, but the technique would work centering any kind of HTML element on a page. You could use this technique with Wings, Visual RPG ASP.NET, and Monarch. There may even be times when this technique is handy with Mobile RPG apps.

Figure 1a below shows the HTML to display an image. The ellipses (...) indicate other HTML or ASP.NET markup that may exist on the page.

<body>
    ...
    <img id="logo-image" src="sunfarm.logo.png">
    ...
</body>
Figure 1a. Basic HTML to display an image.


When displayed with the markup from Figure 1a the image is left justified, as shown below in Figure 1b. (Note: Red border around the image is discussed in just a moment.)

Figure 1b. An image with its default display.


To the center

To center the image it needs to be wrapped in a div tag as shown below in Figure 2a. Note the div tag's id is logo-container.

<body>
    ...
    <div id="logo-container">
        <img id="image1" src="sunfarm.logo.png">
    </div>
    ...
</body>
Figure 2a. The img tag wrapped in a div tag.


A div tag container may already be present in your markup, but if not you'll need to manually add it with Visual Studio's markup editor. With the div tag wrapper in place, the CSS shown below in Figure 2b, using two CSS selectors, centers the image.

#logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo-container>img {
    max-width: 50%;
    border: 2px solid red;
}
Figure 2b. CSS to center the image.


Figure 2b's CSS centers the image as shown below in Figure 2c.

Figure 2c. CSS to put a red border around an image.


The CSS presented in Figure 2b uses an ID selector (#logo-container) to select the div tag that contains the image. The # indicates that logo-container is an element ID. Make sure the ID you specify here matches the runtime ID of your div tag container.

The other CSS selector in Figure 2b uses a child combinator selector to select the img tag owned by the element with an ID of logo-container.

To help quickly identify the image boundaries (sometimes there is transparent space in the image that makes the image look off-center), this CSS below in Figure 2d is included in Figure 2b:

border: 2px solid red;
Figure 2d. CSS to put a red border around an image.


Using a temporary border like that can help save lots of time troubleshooting image centering. A transparent area in an image can drive you nuts causing you to triple-check your CSS or markup only to find out it was transparent image space making things look bad. Once you're sure the image is positioned appropriately you can remove border-related CSS.

Use in ASP.NET

The HTML above used an HTML img tag to display the image. Your ASP.NET ASPX markup may be using the asp:Image control as shown below in Figure 3:

<div id="logo-container">
    asp:Image ID="image1" runat="server" ImageUrl="~/sunfarm.logo.png" />
</div>
Figure 3. The asp:Image control rendering an image.


The CSS provided above works just fine with that control, because at runtime the asp:Image control is rendered as an HTML img tag.

Adding the CSS

In Wings, Monarch, and Mobile RPG apps, there is a CSS file located at:

Themes/Current/Styles/Theme.css

and it is a good place for the CSS you need to add. You'll find the line below hear the top of the Themes/Current/MasterPage.master causing the Theme.css to be applied to the page.

<link rel="stylesheet" type="text/css" 
      href="~/Themes/Current/Styles/Theme.css" />

You could also add your own CSS file, but you'd then need to modify the master page to include it.

AVR for .NET ASP.NET folder structures are far less prescribed, so in those projects add the CSS according to your project's structure.

Additional information

Product/Platform: Wings, Monarch, Mobile RPG, and AVR for .NET