CSS: Center an Image

Author: MikeW    Date: 2016-06-04 14:03   

This page demonstrates how to center an image using CSS.

Center Using a Div

The first method to center an image uses a div tag. The image is centered as part of the text flow. Notice the text-align property is used to center everything in the div. The background property is set, so we can see what is affected by the CSS rule.

   9:.centerImageDiv{ text-align:center; background:#F2F2F2; }

The text and the image are centered as part of the div.

	
  21:  <h4>Center Using a Div</h4>
  22:  <div class="centerImageDiv">
  23:    <p>Here is some text inside the div tag.</p>
  24:    <a href="http://www.google.com"><img style="width: 163px; height: 74px;"
  25:    src="/images/blog/Google-Logo.gif" border="0" alt="Google Logo" /></a>
  26:  </div>

Sample Output

Here is some text inside the div tag.

Google Logo

Center Using CSS on Image Only

The second method is to apply CSS to the img tag.

  10:.centerImg{ display:block; background:#E8E8E8; margin:auto; }

The rule defines the img tag as a block. This allows us to set margins for the tag. Setting the value to auto centers a block element vertically and horizontally. The centerImg class must be set in the actual img tag.

  29:  <div>
  30:    <p>Here is some text inside the div tag.</p>
  31:    <a href="http://www.google.com"><img class="centerImg"
  32:    style="width:163px; height:74px;" src="h/images/blog/Google-Logo.gif"
  33:    border="0" alt="Google Logo" /></a>
  34:  </div>

Sample Output

You can see that the text in the div is not centered in this example. Only the image itself. Also the background only appears behind the image.

Here is some text inside the div tag.

Google Logo

There are pluses and minuses to either method. When using a div, you can wrap images with different divs and provide different formatting output without changing you image tags in any way. When you apply the CSS directly to the image, usually you need to use class attributes to specify which rules are applied to which image.

The complete source code for these examples is provided below. Use the link if you want to grab the HTML source for your own use.

CSS-Center-Image (.html)(.txt)

   1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2:"http://www.w3.org/TR/html4/loose.dtd">
   3:<html>
   4:<head>
   5:  <title>CSS Center Image</title>
   6:  <meta name="keywords" content="css blue sky workshop center image web html"></meta>
   7:  <link href="/css/blip.css" rel="stylesheet" type="text/css"></link>
   8:  <style type="text/css">
   9:.centerImageDiv{ text-align:center; background:#F2F2F2; }
  10:.centerImg{ display:block; background:#E8E8E8; margin:auto; }
  11:  </style>
  12:</head>
  13:<body>
  14:<div id="wrap">
  15:<!-- Main Content goes here  -->
  16:  <div id="main">
  17:  <h2>CSS Center an Image</h2>
  18:  <!-- Put Page content here -->
  19:  <p>This page demonstrates how to center an image using CSS.</p>
  20:  
  21:  <h4>Center Using a Div</h4>
  22:  <div class="centerImageDiv">
  23:    <p>Here is some text inside the div tag.</p>
  24:    <a href="http://www.google.com"><img style="width: 163px; height: 74px;"
  25:    src="/images/blog/Google-Logo.gif" border="0" alt="Google Logo" /></a>
  26:  </div>
  27:  <hr style="margin:20px 0px 40px 0px;" />
  28:  <h4>Center Using CSS on Image Only</h4>
  29:  <div>
  30:    <p>Here is some text inside the div tag.</p>
  31:    <a href="http://www.google.com"><img class="centerImg"
  32:    style="width:163px; height:74px;" src="h/images/blog/Google-Logo.gif"
  33:    border="0" alt="Google Logo" /></a>
  34:  </div>
  35:</body>
  36:</html>