Use CSS to Center Images and Other HTML Objects

Centering images, text, and block elements using CSS

Centered arrows
Westend61 / Getty Images

If you are learning how to build websites, one of the most common tricks you will need to master is how to center items in the browser window. This could mean centering an image on the page, or it could be center-justifying text like headlines as part of the design.

The proper way to accomplish this visual look of centered images or text or even your entire webpage is by using Cascading Style Sheets (CSS).

 Most of the properties for centering have been in CSS since version 1.0, and they work great with CSS3 and modern web browsers.

Like many aspects of web design, there are multiple ways to use CSS to center elements in a web page. Let's take a look at some different ways to use CSS to achieve this visual look..

On Overview of Using CSS to Center Elements in HTML

Centering with CSS can be a challenge for beginning web designers because there are so many different ways to accomplish this one visual style. While the variety of methods may be nice or seasoned web developers who know that not all techniques work on every element, this can be terribly challenging for newer web professionals since the wide variety of methods means they need to know when to use which approach. The best thing to do is to gain an understanding of a few approaches. As you begin to use them, you will learn which method works best in which instances.

At a high level, you can use CSS to:

  • Center text
  • Center a block-level element (like a division)
  • Center an image
  • Vertically center a block or an image

Many (many) years ago, web designers could use the <center> element to center images and text, but that HTML element is now deprecated and no longer supported in modern web browsers.

This means you must avoid using this HTML element if you want your pages to display properly and conform to modern standards! The reason this element was deprecated is, in large part, because modern websites should have a clear separation of structure and style. HTML is used to create structure while CSS dictates style. Because centering is a visual characteristic of an element (how it looks rather than what it is), that style is handled with CSS, not HTML. This is why adding a <center> tag to the HTML structure is incorrect according to modern web standards. Instead, we will turn to CSS to get our elements nice and centered.

Centering Text with CSS

The easiest thing to center on a webpage is text. There is only one style property you need to know to do this: text-align. Take the CSS style below, for example:

p.center { text-align: center; }

With this line of CSS, every paragraph written with the center class would be centered horizontally inside its parent element. For example, if the paragraph was inside a division, meaning it was a child of that division, it would be centered horizontally inside the <div>.

Here’s an example of this class applied in the HTML document:

<p class="center">This text is centered.</p>

When centering text with the text-align property, remember that it will be centered within its containing element and not necessarily centered within the full page itself. Also remember that center-justified text can be difficult to read for large blocks of content, so use this style sparingly. Headlines and small blocks of text, like teaser text for an article or other content, are often easy to read and fine when centered, but larger blocks of text, like the full article itself, would be challenging to consume if the content was fully center justified. Remember, readability is always key when it comes to website text! 

Centering Blocks of Content with CSS

Blocks are any elements on your page that have a defined width and are established as a block-level element. Oftentimes, these blocks are created by using the HTML <div> element.

The most common way to center blocks with CSS is to set both the left and right margins to auto. Here is the CSS for division that has a class attribute of "center" applied to it:

div.center {
  margin: 0 auto;
  width: 80em;
}

This CSS shorthand for the margin property would set the top and bottom margins to a value of 0, while the left and right would use "auto." This essentially takes any space that is available and divides it evenly between the two sides of the viewport window, effectively centering the element on the page.

Here it is applied in the HTML:

<div class="center">This entire block is centered,
but the text inside it is left aligned.</div>

As long as your block has a defined width, it will center itself inside the containing element. Text contained in that block will not be centered within it, but will be left-justified. This is becaus text is left-justified in the default in web browsers. If you wanted the text centered as well, you could use the text-align property we covered earlier in conjunction with this method to center the division.

Centering Images with CSS

While most browsers will display images centered using the same text-align property we already looked at for the parargraph, it’s not a good idea to rely on that technique as it is not recommended by the W3C. Since it is not recommended, there is always a chance that future versions of browsers could elect to ignore this method.

Instead of using text-align to center image, you should explicitly tell the browser that the image is a block-level element.

This way, you can center it as you would any other block. Here is the CSS to make this happen:

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

And here is the HTML that for the image that we would like to be centered:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">  

You can also center objects using in-line CSS (see below), but this approach is NOT recommended since it adds visual styles into your HTML markup. Remember, we want to separate style and structure, so adding CSS styles to your HTML code with break that separation and, as such, it should be avoided whenever possible.

<div style="text-align: center;">

Centering Elements Vertically with CSS

Centering objects vertically has always been challenging in web design, but with the release of the CSS Flexible Box Layout Module in CSS3, there is now a way to do it.

Vertical alignment works similarly to horizontal alignment covered above. The CSS property is vertical-align with the middle value.

.vcenter {
  vertical-align: middle;
}

The downside to this approach is that not all browsers support CSS FlexBox, although more and more are coming around to this new CSS layout method! In fact, all modern browsers today now support this CSS style. This means that your only concerns with Flexbox would be much older browser version. 

If you have issues with older browsers, the W3C recommends that you center text vertically in a container using the following method:

  1. Place the elements to be centered inside a containing element, such as a div.
  1. Set a minimum height on the containing element.
  2. Declare that containing element as a table cell.
  3. Set the vertical alignment to "middle."

For example, here is the CSS:

.vcenter {
  min-height: 12em;
  display: table-cell;
  vertical-align: middle;
}

And here is the HTML:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

Vertical Centering and Older Versions of Internet Explorer

There are some ways to force IE to center and then use conditional comments so that only IE sees the styles, but they are a bit verbose and ugly. The good news is that with Microsoft's recent decision to drop support for older versions of IE, those unsupporting browsers should be on their way out soon, making it easier for web designers to use modern layout approaches like CSS FlexBox which will make all CSS layout, not just centering, more easier for all web designers.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/7/17.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Use CSS to Center Images and Other HTML Objects." ThoughtCo, Aug. 7, 2017, thoughtco.com/center-images-with-css-3466389. Kyrnin, Jennifer. (2017, August 7). Use CSS to Center Images and Other HTML Objects. Retrieved from https://www.thoughtco.com/center-images-with-css-3466389 Kyrnin, Jennifer. "Use CSS to Center Images and Other HTML Objects." ThoughtCo. https://www.thoughtco.com/center-images-with-css-3466389 (accessed December 17, 2017).