Support » Theme: Twenty Twelve » Center the header?

  • Resolved rachel



    Apologies if this has been covered before, but I’m trying to center the entire header for my site using the awesome twenty twelve theme.

    As you can see from my site:

    I was able to center the header image, but I can’t figure out how to center the rest.


Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator t-p


    – Try using Firefox with the Firebug add-on for this kind of CSS work.

    Moderator Andrew Nevins


    Forum moderator

    Make your CSS changes through this plugin

    Thanks for those suggestions. Which class/id do I need to edit to get the custom image center-aligned?

    Looks like this works on Chrome and Safari but it’s still left-aligned in FF.




    Font hero

    Looks like you got header.php edited without child theme.

    Create a child theme

    and put your version of header.php in your child theme’s folder, make sure the parent theme is fresh ( unedited ).

    Move <div id="title"> out from the <hgroup>

    so now you will have this structure

    	<div id="title">...</div>

    Take out all the align="center", for centering an image just use class="aligncenter" right in the <img> ‘s attribute.

    Adjust anything else like margin, or padding in your child theme’s style.css

    Thanks for this–do you mean that I should move

    <div id= title=<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>

    out from under <hgroup>?

    Once I do that, where does my header image go?




    Font hero

    1. Yes.
    2. Look at the structure, it goes to the top, outside of it.

    Anyway, <hgroup> has just been removed from HTML5 specification, so all the HTML5 themes will soon be updated and folks who make a copy of header.php for child theme will have to edit this too.

    So you don’t have to worry about moving that out of <hgroup> anymore.

    You’re great. Thanks very much.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Center the header?’ is closed to new replies.