1. Technology

How To Center Text and Images with the DIV Tag and CSS

By

Centering elements using CSS and a DIV tag is easy. And once you've centered your text or images in this fashion, you'll know that it will be valid HTML. Plus, you avoid using deprecated tags and attributes like align and CENTER. This article is for beginning web developers and will help you learn how to use the DIV tag and CSS to center text and images on your pages.

Difficulty: Easy
Time Required: 2 minutes

Here's How:

  1. Open the web page you want to update in your favorite text HTML editor.

  2. Find the elements you want to center on the page. If you already have a CENTER tag in the document, start there.

  3. Place your cursor before the first <p> or <img> tag you want to center.

  4. Type:

    <div style="text-align: center;">
  5. Move your cursor to the end of the text or other elements (including images, tables, and so on) that you want centered.

  6. Type

    </div>
  7. Delete any <center>, </center tags, and align="center" attributes you have around the centered section.

  8. Save your page.

  9. Test it in your favorite browser.

Tips:

  1. You can put your style in the DIV tag itself, or in a class in the head of the document.

  2. Some older browsers don't like to center tables using a DIV tag, so be sure to test in various browsers if you're centering a table.

  3. Using this technique may be determined to be invalid, as CSS 2 indicates that the text-align property is only for inline elements, not block-level elements.

    For a more technically correct method of centering block-level elements, see my article How to Center Anything with CSS.

  4. I have tested this technique using HTML5 and XHTML 4.01 strict DTD and it works in Chrome 1+, Internet Explorer 5+, Firefox 1+, Opera 6+, and Safari 1+.

What You Need

  • Text Editor

Related Video
How to Align Text in a CSS document

©2014 About.com. All rights reserved.