Jul 1, 2017

How to center blogger top navigation pages and others using css code

center blogger top navigation pages, center pages in blogger using css codes
By default, blogger navigation pages or header image are not centered but left aligned and in other to customize your blog and make it look good the way you want, you always want to center the top navigation pages, header image, blog post images, sidebar images, gadgets, text, headings and almost everything on the blog.

In this post, i have created a complete list of css codes for you explaining how you can use the codes to center the different elements on your blogger blog.

Without wasting your time let us jump into the deal of the day!


LIST OF CSS CODES TO CENTER ELEMENTS ON BLOGGER:

Listed below are the different ways or css codes you can use to center the different elements on your Blogger blog. 

Note: This may vary depending on the code your template uses. Please, ensure you double check the class or id, and use it to replace the selector below with the correct one for your template.

STEPS TO ADDING THE CSS CODES:
1. In your Blogger Dashboard 
2. Click on Theme.
2. Click on Customize 
3. In the theme designer, click on Advanced and then Add CSS then copy and add any of the below codes into the box

                               OR

Go to Theme > Edit HTML and add the following code right before ]]></b:skin> 


CENTRE HEADER IMAGE/LOGO ON BLOGGER
#header-inner img {width: 900px; margin: 0 auto;} 
#header-inner {text-align: center;}

CENTRE POST TITLE ON BLOGGER
Add the following code above ]]></b:skin> 
h3.post-title, .post-title { text-align: center; }

CENTRE POST DATE ON BLOGGER
.date-header {text-align:center;}


CENTRE NAVIGATION MENU ITEMS/TABS ON BLOGGER
.tabs-inner .widget ul { text-align: center;} 
.tabs .widget li, .tabs .widget li {display: inline-block; float: none;} 

CENTRE PAGE LIST ITEMS/TABS ON BLOGGER
.PageList {text-align:center !important;} 
.PageList li {display:inline !important; float:none !important;}

CENTRE SIDEBAR GADGET/WIDGET TITLES ON BLOGGER
.sidebar .widget h2, .title {text-align:center;} 

CENTRE BLOG POST IMAGES ON BLOGGER
.post-body img {margin: 0 auto; text-align: center; }

CENTRE THE ARCHIVE WIDGET/GADGET LIST ON BLOGGER
#ArchiveList, 
#ArchiveList ul {text-align:center;}

CENTRE SIDEBAR ITEMS AND GADGETS ON BLOGGER
#sidebar-right-1, 
#sidebar-left-1 {text-align:center;}

CENTRE HEADING TAGS IN POSTS ON BLOGGER
.post-body h2, 
.post-body h3, 
.post-body h4, 
.post-body h5, 
.post-body h6 {text-align:center;}


If you found this post helpful or you have other methods that also my fellow bloggers give blogger Template a better look, please don't hesitate to use the comment box below.

Help us in sharing the post to fellow bloggers.

Don't forget to Subscribe so you will not miss our regular blog updates!




Follow:


Click these buttons to follow LawrenceIfeanyi:

No comments:

Feel free to share your comment(s) via comment box below.

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

We will try to response your comment(s) as soon as possible.

If your comment is unrelated to this post, please drop it through the Contact Us page HERE .

Please DON'T spam.


THANK YOU FOR STOPING BY.



Post a Comment

Designed by: Nwaonuma Ifeanyi.
Phone No.: (+2348037343364)