Centering a Blog Header

One blogger asked a very relevant blog-related question.

Devdas,
Hello from the US. I changed my title, but can't figure/find out how to center the darn thing. Can you help?
Thanks in advance!
--CM

CM, this was a problem I faced with my first blog, and I eventually resolved it. First, go to your Dashboard, then click on your blog's name, the tab Template, and start scrolling down until you reach "div id="header"" and "h1 id="blog-title"," where you should see "img src=(header image URL)" and right after that there is "/h1 width="660" height="141" align="center" alt="(something)"" or something along those lines. It's about 60 % of the way down. In the part labelled "align," change it to "center" like it was in the example. If that doesn't work, there should be a part of the code near this one where you can adjust the margins. Do trial and error on the margin values until the header is moved to an approximately centered position.

If even that doesn't work, you should probably just change the size of the header image. This doesn't mean you have to change the content of the header itself. All you have to do is add blank space around it borders. Just open up some simple editing application like Microsoft Paint, which is accessible from Start, Programs, Accessories, and the application is "Paint." Open up the picture file for your header, and press the Edit button on the top menu, Select All, and Cut to cut the actual header image. Then adjust the borders of the image so they're wide enough by either dragging the arrows or simply pressing the Image button in the menu and Attributes, where you can adjust the dimensions. Just match how many pixels wide your page is (it seems like 660 pixels for your page), and match how many pixels high your image is (it is 173 pixels for your header image); you might want to make it higher in order to cover that whitish box in your blog, but you could get rid of that by just deleting to code part.

Color the blank image black in order to match the background color of your blog. Then, do simple arithmetic: subtract your header image size from the page size (660 px - 430 px = 230 px) and divide this value by two to determine what size of blank space you need to leave on both sides of your header image for it to be centered (230 px / 2 = 115 px). Now, draw temporary bright lines at 115 px and 545 px for your specific blog, since this would leave 115 px on both sides of the header image. Now, simply paste the previously cut header image in between those bright lines, and finally erase those lines with black color. You might want to upload this new image on an image uploading site like http://www.imageshack.us/ something like that and use this given link because sometimes the blogger upload is complicated. Or just click on Compose Post, upload the image, go to Edit HTML, and cut the image URL. On second thought, this is actually much easier.

You can now replace the URL in the aforementioned header coding with that of this new image. It should now look like it's centered; just make sure the number of pixels we used for the width (660 px) is correct. I think it's actually 800 px. I also think the new Blogger Beta, however, has a simpler way of doing all this: you can simply specify the file name of the header image and if you want it centered or not. I haven't tried it yet, though, because there are some other problems associated with the beta version. I recommend you try my techniques before you take this route unless you were planning on switching anyway.