How to Center Headers in CSS on WordPress

Use automatic margins to center a WordPress header in CSS.

The header.php file of a WordPress theme contains that theme's code. At a bare minimum, this code includes both HTML and PHP programming. Cascading Style Sheet (CSS) code --- usually found in the style.css file --- controls the look and placement of the header content. You must edit this style sheet code to center a header in WordPress. Set automatic margins to your header in CSS to make the browser calculate a centered position.

Instructions

1. Open your browser and load the wp-admin directory of your WordPress website. Enter your username and password to log in to the dashboard.

2. Navigate to "Editor" under "Appearance" to load the "Edit Themes" screen. Load the header.php template file in to the editor box by clicking on its link under the "Templates" heading.

3. Locate the set of tags wrapping around your header. Depending on the theme and the standard of HTML used, you might find "<div>," "<header>," or "<section>" tags. Find the ID assigned to the wrapping tag:

   <div id="myheader">

   Header content here...

   </div>

   In the above example, "myheader" is the ID you need.

4. Load style.css in the editor by clicking its link at the bottom of the list of template files. Find the selector that targets your header. Here is an example using the "myheader" ID:

   #myheader {

   background: URL(path/to/image.png) center no-repeat;

   width: 960px;

   height: 200px;

   }

5. Add the following CSS code between the curly braces for the "#myheader" selector:

   margin-left: auto;

   margin-right: auto;

   Click the blue "Update File" button to save your work.

Tips & Warnings

• You must set a width for your header to center it correctly. Set the width to a percentage value if you do not want to use a static width for your header.

• The above method of centering does not work in Internet Explorer 6. Wrap the header in a new set of "<div>" tags with an ID and set its "text-align" property in CSS to "center" to support that browser.