This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 29, 2007

Digg This Story

Center Align Page Elements

A number of queries we received had to do with alignment problems. In some templates, the links, text, widgets and other page elements are aligned to the left. Many bloggers prefer to have widgets in the center of the sidebar or post body. There are a couple of ways to align the page elements within the sidebar or the blog posts. In this tutorial, you will learn how to center align all or selected page elements in your blog.

Header Alignment

If you are looking to center align the Header Title, Description and Header image, look up our other guides - Header Image and Title Alignment (I) for Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe templates; and Header Image and Title Alignment (II) for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.

Center align all the elements

The general alignment codes are found in the stylesheet. Go to Template -> Edit HTML. If you want the elements in the sidebar to be in the center, try looking for this and insert the alignment code (shown in red):-

#sidebar-wrapper{
text-align:center;
}


In different templates, the CSS classes are named differently. Hence, if you can't find the above, look for any of these and insert the code:-

#sidebar
#sidebar-wrap
#side
.sidebar


Do not save the template. Preview the Template. The text and elements in the sidebar should be in the center and not aligned to the left.

Center Align Page Elements

In the same way, if you want the elements in the main post body to be in the center, add the code here:-

#main-wrapper{
text-align:center;
}


If you don't see this in your template, try inserting the code under any of these or words to that effect and preview the template.

#main
#main-wrap
.main


Center Align Page Elements

To center align the Footer elements, the code can be inserted under any of these:-

#footer
.footer


Center align one element

Suppose you want only one element to be aligned in the center. After you have created that element, be it a picture or widget or text, go to Template -> Edit HTML and scroll to somewhere near the bottom. Look for the widget ID. For example, if we have added a HTML code, a link list and a labels widget in the sidebar, we will see this:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='HTML Code' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>


The highlighted text are the widget IDs. Scroll further up the template and insert after a } character the alignment code like this:-

#HTML1{
text-align:center;
}


Replace the part in green with the relevant ID. This will center align only that particular page element.

DIV alignment tags

The other way to align an element is to insert the DIV alignment tags. Let's say you have created a HTML page element to insert a widget, image links, stat counter, etc. Insert these tags before and after the HTML Code to align that element in the center.

<div style="text-align:center;">HTML Code of widget</div>


Center align element in Blog Post

You may center align a picture, code, table, link or text within a blog post. Just block the part you want to put in the center and click the center-align icon in the Post Editor:-

Center Align Page Elements

Alternatively, you can switch from the “Compose” mode to the “Edit HTML” mode. Insert these tags and what goes in between will be in the center.

<div style="text-align:center;">TEXT TO BE CENTERED</div>


Further reading:-

Style and Position Sidebar Images on image borders and margins in sidebar.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

37 comments:

The Beading Gem said...

Thanks for such a quick post on this issue and for letting me know. The div align bits before and after after do indeed centre the text very well. But this does not work for widgets. I tried it on my cluster map and the writing inspiration quotes. What am I doing wrong?

One more suggestion for you to address for your readers - how to put in a sidebar title background.

Thanks again for the nice comment on my blog and keep up the good work.

bizwhiz said...

It's either that or the template e.g., #HTML1{text-align:center;}

We tried all the methods in our Blogger blogs when we wrote this article.

There is already an article on Sidebar Title Background Color and Image. Can take a look.

Richard said...

hi,first of all thanks for the great site !!!
I'm trying to align the Google search bar from the left to the center. in the below example ,,just what line of the code goes replaces " TEXT TO BE CENTERED"?
thanks,,

Richard


style="text-align:center;">TEXT TO BE CENTERED

bizwhiz said...

Hi Richard

Use the DIV alignment tags (see the section in the article) and insert the Google code between the tags.

Glitry said...

thanks ... coool post.
how to add code to a blog?? showing it as a text

--
http://goodtoknowit.blogspot.com

Chuck Gates said...

Thanks for your helpful blog.

I am wondering how to center the actual page elements while keeping the text and pics inside those elements left justified.

Where do I put code to center the entire frame?

bizwhiz said...

Hi Chuck Gates

Use the div alignment tags. For example,

<div align="center">WIDGET CODE</div>

Lily said...

I got all the page elements on the sidebars centered... except the blog archive. For some reason it won't center.

Any suggestions?

Thanks for your help,
Lily
Blog.LilyandTulip.com

bizwhiz said...

Hi Lily

Try this:-

#BlogArchive1 ul{
text-align:center;
}

Lily said...

You are the best!

Thanks for your help...

I have one more issue that I'm trying to figure out (if you are up to it). The banner that I uploaded displays... sometimes. Sometimes it doesn't. I have tried saving the image as a jpeg, gif, etc.

Have you ever seen this issue? What I'm I doing wrong?

I'll pass your site to all of my friends...

Thank you,
Lily
Blog.LilyandTulip.com

bizwhiz said...

Hi Lily

If it is a valid picture file, it should display. If the file size is big, it may take a longer while when the page loads. Try reducing the file size and see if the problem persists.

syed said...

Thanks for this gr8 info. .........

But i hav some doubt...

my blog has alligned to left side....
i hav tried alot 2 bring it normally but i cant.......plzzz help me.......

i hav added text-align:center;} for main-wrapper and also side-wapper....... but still cant do anything....

my blog is: allstuff4u2.blogspot.com

Melissa said...

I recently had my page redesigned, and some sidebar links are centered; some are to the left. I'd like them all to the left. How do I do this?

Melissa said...

I just sent a comment...but wanted to let you know that I found out the answer to my own question. Thanks for your blog - it helps a lot!

gammerth said...

how to e-mail bizwhiz? if i want to ask a question?

LWC Store said...

I have a blog http://lwcfamily.blogspot.com. Manage to download image files but the images appear to be in black and white instead of colours on the blog. When click on the images, the new windows appear with bigger image with colours.

Please enlighten me how to solve my problems.

Thank You

colin aka flamekrayt said...

Hey!

To start off, I would like to say that this is a great site! Very helpful indeed.

I also have a question, and this was the most relevant post I could find. I have tested viewing my blog on a 17" computer screen, and as far as I can tell, it fits nicely. However, for widescreen users, my blog is aligned to the left. Is there a way to centralize it?

Thanks!

POLARFUCHS TREASURES DIGITAL DECORATIONS said...

Hi, when I try to center my widget(s) with the div-align code ALL my main wrapper elements are centered, also the text within the posts. I inserted this code before
div id='main-wrapper'
and the closing-/div after the widget list. This works for all.

But how can I make only the widgets be centered, but not the text of the posts?
Thank you for any tip.
Chris

sonali said...

Thanks for the informative post.

Nicholas said...

if you want to align to the center of a page, may i suggest the solution outlined here. Its fully browser compatible.

Jona said...

thanks for this helpful post.. *wink

Beauty of Life
Money Maker
Jona's New Life
Creations

ananthannair said...

really good post,thanks friend
it helped me alot in changing my blog
to your views and suggestion.
Thank you sir

The Shoup Family said...

I need your help! I am a lowly blogger mama and I have been tweaking with your 3 column layout for minima. I have tried to use the coed to have the posts centered with the sidebars on EACH side. And I am still coming up with two sidebars on the right side. I even tried to use the codes that are set for two sidebars on the right thinking they were switched. But to no avail. Can you help me?

www.shoupfam2000.blogspot.com
or shoupfam2000@sbcglobal.net

Thanks, Aja Shoup

Rammy said...

can u tell how to prevent content being copied in blog?..

<3 ariahloves said...

hi.
thanks for the great site!
I was wondering if you know how to make a blog page appear in the center of the screen no matter what's your monitor size? If you know, can you give me the codes for that? thanks.

Brandy said...

I am trying to change to the minima 3 column template and I can not get it to work. Do you have any sugestions??

rashid said...

thanks (100x)..

u guys great..

Scott said...

Firstly, thank you for this post it has helped me so much.

I have center aligned all HTML elements in my sidebar, but am having trouble with my archive and google translate gadgets...basically all of my blogger gadgets.

I have tried 'Center align one element' and 'DIV alignment tags' but think I must be putting the code in the wrong place because when I go to preview Blogger tells me that there is an issue with the code.

What I am doing is...

widget id='HTML4{
text-align:center;
}' locked='false' title='' type='HTML'/>


...is this correct?

Kyle, Tiffany, and Kaiden said...

For some reason after making a recent post, it screwed up our layout. Now, all the elements of the sidebar are at the bottom of the page. I can't figure out how to get it back to the side. Could you take a look?
harmon55.blogspot.com

Bollywood Music Hub said...

Hey Friend !!
I have a blog named "BollywoodMusicHub.blogspot.com" and i am using the AdBrite Ads..

at the Footer of the page I have put one ad which is left aligned and instead of it I want it in "Center"..

What should I do???

Thanks in advance ..please reply ASAP...

Debbie said...

You are THE best!!! The fact that my $%#@ing blog header wouldn't center and there was no simple user interface option has pissed me off for over a year now. It just seemed so obvious that 98% of people would want that functionality. Your instructions were clear, dummy proof, and took me less than 3 minutes to implement.

If you were in front of me, I'd kiss you {} :)

I added you to my Facebook and will be adding you to my blog as well.

Daryl said...

I understand blogs do take sometime to grow and can take months of work to do, but over time it is well worth it and i also agree that understanding pagerank and how it does work can be quite tedious sometimes when going to different sites because they can vary, and i agree when finding the right tool that works, a person should stick with using it.

blogger tricks said...

I always wanted to align my ads on the center but was unable to do so but with the help of your article I managed to do so thanks buddy.

Zeenat said...

I loved this post, worked perfectly for aligning my adsense banner in the middle for http://zeenatboutique.blogspot.com/2009/10/latest-asian-fashion-2009-at-zeenat.html. This website has helped me so much.. Thank you very much.

Suresh said...

wow! the center align page elements post was very useful! Thanks!!!!

visit lists2day.blogspot.com said...

ive been coming back to your site for more tips to improve my blog. im really grateful for all the tips!

just one question, when i use

#Image1{
text-align:center;
}

the title also gets centered.

i just want the image the widget centered, and not the title. pls help!

MartinM377 said...

Actually I tried this on my Writing blog because I wanted to center the Blogger logo so that the blog would look better organized. But I followed your instruction but it still didn't work. My blog is at http://awritersblog-martinm377.blogspot.com/ - can you tell me what I am doing wrong?