Before |
After |
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
That'd be all. Have fun!
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.Image img{ display: block; margin-left: auto; margin-right: auto; }
That'd be all. Have fun!
awesome thanks!
ReplyDelete@Reality Me: No problem mate. Cheers.
ReplyDeleteYay! I've been wondering how to do that! Thanks! I put a link to this page on my site, if you don't mind....www.chickthatbytes.blogspot.com.
ReplyDeleteThis is great! Thanks for all your hard work...
T.K. Goforth
@Chick of All Trades: I sure won't, sue me if I do. Glad you find it helpful. Seems like you have lots of blogs for yourself, have fun with them.
ReplyDeleteCheers.
Thank you so much! I looked all over for this, and you are the only one who was helpful! Really appreciate it.
ReplyDelete@M: Glad you found the right place :)
ReplyDeleteit doesn't work for me..my pictures are there via an html code (html/java script) gadget... on all of them the image is to the left...and applying this css code did nothing. my template is Simple. Can you help me further?
ReplyDelete@Marcia: That is because the code given in this tutorial is for Picture Gadget alone, as I've mentioned in the title. In your case, use this code:
ReplyDelete#HTML2 img{
position: relative;
left: 10px;
}
Change the value 10 accordingly. Note that this will only work for the current HTML/Javascript gadget that you have on top of your right sidebar. If you decide to add more images later, you need to add more codes. The code itself will be similar, but you need to address the right gadget ID. In the code above, it is #HTML2. For your future gadgets, it will be different. Click here to find out how you can identify your gadget's ID.
Hope this helps. Cheers.
@YoboY...thanks !! it did work on the gadget on the right sidebar. however, the top entry where the posts are, is actually a gadget dragged there. When i identified the id per your instructions above ...it didn't do anything at first then as i played with it...it moved everything, not just the image in that gadget but all the pics in the posts below as well. ?? anyway, for now i've positioned it the best i can and will try on other ones...i am interested in trying increasing the width on the gadgets in my header . thanks..i love your website...!!! you explain things simply but effectively..
ReplyDelete@Marcia: That's thoughtful. You're welcome. Playing with CSS can be really fun at times. If you need a particular help on something, feel free to contact me, and I'll try my best to help you out.
ReplyDeleteCheers.
Hi - I posted this last night, but I don't think it worked properly. I'm trying to center the images on both the left and right sidebar. I have tried workarounds that have been successful in the past (including this one), but nothing is working - whether I edit the code directly or make a change in the CSS editor in the template designer. Plus, I would love to know how to eliminate or reduce the padding in the sidebars. I am using the simple template. I would greatly appreciate some help, thanks!
ReplyDelete@Paula: It does work. But it seems like you've editted the code. Instead of 'display: block;', you've changed to 'display: table;'. This isn't a problem in Firefox - your blog images are centered in Firefox, and most other browsers. But IE's 'advanced' renderers do not 'display: table;'. Change it back to the original code, should be fine. If you don't see any changes, press enter after the last character of the last line in your template designer, and click on 'Apply to Blog', and refresh/restart your browser.
ReplyDeleteAs for your sidebar padding, use the following CSS:
.main-inner .column-center-inner {
padding: 0 0px;
}
.main-inner .column-left-inner{
padding: 0 0px 0 15px;
}
.main-inner .column-right-inner{
padding: 0 15px 0 0px;
}
Cheers.
Can't believe how long it took to find your information. I tried all kinds of other crap people said worked. Your css fix worked great! Thanks so much.
ReplyDelete@Takara: Glad you've found the fix at last. If you need further help, feel free to contact me. Click on the 'Ask a Question' link above (or below).
ReplyDeleteCheers.
not working for my blog http://tinta-tajam.blogspot.com
ReplyDelete@tinta tajam: Of course it does. The thing is, the images from your image gadgets are already centered. You won't notice a different when you enter this code. You can't fix something that isn't broken.
ReplyDeleteI'm trying to center the 4 photo links under my image on the right sidebar (facebook, twitter, pinterest, bloglovin), but this code doesn't seem to be working for me even though they are with the picture widget.
ReplyDeletehttp://casualbedlam.blogspot.com
@Karle: 'Center' in this context is a relative term. Your widgets don't have any margin defined. But that doesnt mean nothing can be done about it. Add this to your CSS, and see if this is what you were looking for:
ReplyDelete#Image1, #Image2, #Image3, #Image5{
left: 60px;
}
Feel free to adjust the value '60' above.
Do you know how I can decrease the space between pictures I've inserted using the Photo gadget?
ReplyDelete-rachel (aliveinthefire at gmail dot com)
Thanks!
@AliveintheFire: Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
ReplyDelete.widget.Image{
margin: 0px !important;
}
.widget.Image .widget-content br{
display: none !important;
}
.widget.Image{
margin-bottom: 10px !important;}
Adjust the value '10px' accordingly. Cheers.
Thank you so much for this!! I did a google search to figure out how to do this and everything I found before this were super complicated. This is exactly what I was hoping to find!!
ReplyDelete@Monica Tillery: Glad you've finally found the right spot :)
ReplyDeleteYou are my new god!
ReplyDeleteOh, well, you're blessed!
DeleteWholly crap - thank you!!!!!!!!!!!!
ReplyDeleteMost welcome :)
DeleteSo thankful I found your blog...it has been really helpful! Cheers!
ReplyDeleteGlad you think so, thanks! :)
DeleteTHAT was the best and easiest tip ever!! Thank you!!
ReplyDeleteGlad you think so :)
DeleteHello! Can you please help? For some reason my gadgets on the left and my posts in the middle are not level with each other anymore. The top of the gadgets and the top of the posts used to be even but not anymore. If you don't know what I mean than visit my blog but is there any way you can help me?
ReplyDeleteSorry about the off-topic comment but I didn't know where else to put it!
Hi Sheesh,
DeleteAdd this to your CSS:
.column-center-outer{
margin-top: -63px;
}
Cheers..
Wow thanks so much! Worked like a charm! ;)
DeleteExcellent! :)
Deletethank you so much for this code line, it really spruced up my site nicely.
ReplyDeleteThat's great! :)
DeleteThank you so much!!! Those zig zag images were driving me absolutely nuts. 2 seconds of work and now it looks great aligned. Thanks, again!!!
ReplyDelete~Tanya
Mrs. Dwyer’s A+ Firsties
Good job! Kudos to you for finding the right solution :)
DeleteCheers!
Thank you for supplying this info! Saved me many frustrations :)
ReplyDeleteGlad I could be of help :)
DeleteI'm so glad I found this tip. Thank you! Is it possible to get the captions centered too?
ReplyDeleteHi Erika,
DeleteYes it is possible. But it'd be better if I could have a look at your blog before suggesting something. Can I have a look at your blog?
BLESS YOU! That worked perfectly, and I no longer have to go back and add a code to center every little picture on my blog. (Yes, I had actually been doing that!)
ReplyDeleteThat's great! :)
DeleteCheers and God bless.
You are the best, thank you! Works perfectly!
ReplyDeleteThis has taken me FOREVER to find! Thanks so much! :)
ReplyDeleteGlad you finally found it! :)
DeleteCheers and God bless! :)
Youre a life saver, I cannot imagine how desperately i looked around the net for this! thanks a bunch.
ReplyDeleteGlad I could be of help :)
DeleteThis worked perfectly! Thanks so much! :)
ReplyDeleteThanks for the feedback Elaina, appreciate it :)
DeleteMy one small picture is still too far to the left in my blog. Help!
ReplyDeletehttp://margieseptember.blogspot.com/
If you're referring to your header picture, here's how you can center-align it. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete#Header1_headerimg{
margin-left: auto;
margin-right: auto;
}
Cheers :)
Well, that certainly did the trick. Thanks ! Is there any way to now put the title description right under the picture? It now is off to the left as well. Thanks : )
DeleteYou bet! Here, add this code towards the bottom of your 'Add CSS' box (leave a line after your previous code before adding this one)
Delete.description{
text-align: center !important;
}
Let me know how it goes :)
Can you help me please? I would like the little pixel cat on the right to be centered. I've put your code in but it doesn't work :(
ReplyDeleteIt's been put in as an image widget.
thanks.
http://katiemarieclare.blogspot.co.uk/
Hi Katie,
DeleteSure this. Add the following code to your 'Add CSS' box:
#Image1_img{
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
Let me know how it goes :)
Cheers..
Hi, thanks for responding so quickly, sadly the code didn't work :(
DeleteHi Katie,
DeleteThe code is working fine, but something is off in your template, thus preventing new codes from having any effect on your blog. I'm gonna have to inspect your template to see if I can find anything wrong with it. Could you get in touch with me via email? Send me an email by visiting my G+ page.
Thank you. This saved me!
ReplyDeleteI kept thinking I had to figure out how to mess with the padding.
Happy to be of help :)
DeleteAlright...please help! Trying to center the titles on my gadgets in both columns...I've figured out how to do it to the right column but it isn't working for the left. I know this isn't picture related (forgive me). HELP!
ReplyDeletewww.mayhemmavens.com
Hey Ketchup,
DeleteTry this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.sidebar .widget h2{
text-align: center !important;
}
Let me know how it goes. Cheers :)
IT WORKED, IT WORKED, IT WORKED!!!!!
DeleteTHANK YOU, THANK YOU, THANK YOU! ::sigh::
Total pain in the butt! You are awesome! Couldn't find anyone that would help...spent WAAAAaaayyyy too much time on this last night!
Thanks again! Can't wait to see what other fantastic things I can learn from your blog.
Don't mention it. Glad it worked :)
DeleteCheers and God bless!
Yoga,
DeleteSo now I'm trying to center the picture on the left column and I tried using your above code on that...no dice. Can you help?
Hi Ketchup,
DeleteIt looks like your picture is already centered. What am I missing?
Screenshot
Looks like it's centering them in firefox but not in IE...weird! Can you help me with that...ALSO, the fonts are different...why is that? UGH!
DeleteNM...changed the template layout so now I'm good. The only other thing I noticed is that in FireFox the title of the blog isn't centered but it is in IE. Can you help me with that?
DeleteSorry for my ridiculously late reply. Your title isn't centered in both IE and Firefox. Have you got it fixed?
DeleteSo I know how to center and I know how to adjust the spacing but it seems to not let me do both. Is there a solution???
ReplyDeleteHi Laurel,
Delete1) What happens when you try?
2) Have you tried clearing your cache/cookies?
3) have you tried using a different browser?
4) What's your blog's address?
Finally.
ReplyDeleteThanks.
Andy
Most appreciated :)
DeleteBrilliant, thank you.
ReplyDeleteDon't mention it :)
Deletehow do I undo the code to revery back to original layout of images?
ReplyDeleteRemove the code that you've entered from your 'Add CSS' box.
DeleteCheers :)
OH MY GOD THANK YOU!!!!!~!!!!
ReplyDeleteDon't mention it :)
DeleteCheers!
I was able to do half of what i wanted but not the half thats bothering me the most. I want my buttons to be centered under my picture. what am i doing wrong???
ReplyDeletehttp://kershawsincali.blogspot.com/
Hi Natalie,
DeleteSorry for the late reply. I need to know where exactly are these buttons that you're referring to, and to which picture do you want the buttons to be centered under?
Thank you!! You rock! :)
DeleteWOW. Worked perfectly, thanks a lot.
ReplyDeleteYou're most welcome notatschool :)
DeleteI've been trying to figure out how to do that for a couple of weeks now. Thankful to have found your super easy cure!
ReplyDeleteKate
Kudos to you for finding the right page, Kate :)
Deleteso glad i found your page! worked right away :)
ReplyDeleteExcellent! :)
DeleteI added a picture at the bottom of my page that points to the "Older" posts and reminds readers to click on it to read more. How do I move that picture to the right so it is pointing closer to the word "Older"? I tried the above code but it didn't move it over. I realize I may be using the wrong thing here. I added the picture w/ the picture gadget thanks!
ReplyDeletehttp://tipgarden.blogspot.com/
Jan
Forgot to also ask, is there anyway to add it directly below the linkwithin gadget that is embedded directly below the post? Mine is showing up way at the bottom (Probably from all the ad's.) Thanks
ReplyDeleteJan
Hi Tip Garden,
DeleteThis is the best I could come up with.
1) Remove your Picture gadget
2) Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#blog-pager-older-link{
width: 200px !important;
height: 144px !important;
font-size: 0px !important;
display: block !important;
background: url(http://3.bp.blogspot.com/-dY1yuNqlfVo/UU_Ci1yKTlI/AAAAAAAAECU/Uw9x2E_BR4A/s760/OP6.jpg) !important;
}
Hi,
ReplyDeleteI think this tutorial is what I need for what I am trying to fix. It's the picture gadget that I want to center on my blog and I entered your code but I'm not sure if I've done it wrong or it's something else I'm supposed to do. please help.
http://neatasaword.blogspot.ca/
Hi Ashley,
DeleteYour image gadget appears centered to me. What am I missing?
i've been looking for a way to do this and i finally found it! so thanks. but the problem is that i still have this nasty colour bars at the sides of the header picture. how do i get rid of that?
ReplyDeleteHi Toki,
DeleteIs this your blog --> http://www.knightslaurel.blogspot.com/
I don't see the color bars that you're talking about. What am I missing?
yes it is. but i had to remove it because it was so unsightly. i'll put up a picture so that you can see it. thanks.
Deletealso how do i center the picture? instead of it aligning left?
Add this to your CSS:
Delete.tabs-cap-top, .tabs-cap-bottom{
border-top: 0px !important;
}
.tabs-outer{
background: none !important;
}
That should do it. As for your image, it looks like it is already center-aligned. Have you got it fixed?
hi yoga thanks so much. im about to try it.
Deletethe image automatically centered, thankfully. i'll keep you posted.
its absolutely beautiful!!!!!! wow. thanks yoga. you're the best
DeleteIs there a way to also center the caption that's goes with the image in a gadget? Thanks,
ReplyDeleteHere you go Robert, this should do it:
Delete.Image .caption{
display: block !important;
text-align: center !important;
}
Cheers :)
worked perfectly, you are the best, thanks so much!
DeleteNo biggie :)
DeleteThis is great. Thanks a lot!
ReplyDeletemikanyukihara.blogspot.com
No problem :)
DeleteOnce again, you come through!!! Thank you!! You are always my first stop for blog set up questions!!
ReplyDeleteThank you!!
Thanks Connie :) Hope you enjoy your stay here :)
Deletehi, trying to center my right sidebar widgets on www.thevintagesouls.com but the code isnt working?
ReplyDeleteTry adjusting the position of your sidebar manually. Insert the code below to your CSS and then play with the value '10px' until you get the desired look:
Delete.column-right-inner{
position: relative !important;
left: 10px !important;
}
Cheers..
Hi Yoga,
ReplyDeleteFirst, thank You for Your great knowledge sharing and really simple to follow instructions.
My question is if You apply Your "tweak" code in to css is it that rule for all "Image widgets" or You can apply it just to targeted.
Because I have one "Image Widget" with Croatian flag added bellow the header and I want it to be aligned left (not right or center). But I want that just for that particular widget.
And if taht is possible can You help me to put "Caption" before it and aligned to it ?
http://netko69.blogspot.com
Or is it a better way to put just Text widget with pictures in it?
Kind regards,
Neven
Hi Neven,
DeleteYes, it is possible to target a particular gadget, provided it has a unique ID to handle it - and I know for a fact that image gadgets have individual unique IDs. As for the caption, you can readily add one using the same Image gadget. I've seen your blog to have a look at the Croatian flag that you're describing, but I couldn't find any. What am I missing?
Hi Yoga,
DeleteThanks for Your response. I removed that widget, but now I put it back so that You can See it.
If you would be so kind to help me with "reposition" of it, or simmilar "Image widgets" will be very nice for future uses.
Kind regards,
Neven
Hi Neven,
DeleteThe code below should help you to reposition the flag:
#Image1{
position: relative !important;
left: -20px !important;
}
Adjust the value '20' accordingly. Cheers :)
Hi Yoga,
DeleteI did that (except i changed it to 800) but then "admin tools" widget/icon went too far right :))
But it works !
Thank You anyway.
Now I am playing by putting "picture" inside JAVAscript/HTML widget and positioning it.
Kind regards,
Neven
Excellent! :D
DeleteHello, I'm trying to centre align my image on http://freybella.blogspot.co.uk/ in the right hand side gadget bar but nothing I enter in the CSS box seems to be working...?
ReplyDeleteHi Freya,
DeleteThis should work fine:
.Image img{
display: block;
margin-left: auto;
margin-right: auto;
}
I don't see these lines anywhere in your template. Could you re-add them to your 'Add CSS' box and make it is saved? Let me know how it goes.
Fantastic!! Thanks so much!
ReplyDeleteThank you so much! My blog now looks amazing! I might have to keep coming back for more help. :)
ReplyDeleteYoga
ReplyDeleteNeed urgent help ,my image was aligned perfectly with the other gadgets now its shrunk don't know what I did , can you please help to make it fit . my blog : http://glittery-dreams.blogspot.com
thank you
Dazzle,
DeleteHave you got this sorted? If not, could you point me to the exact image which isn't aligned right now? I'm not really seeing the image you're referring to, or perhaps I'm looking at the wrong place.
Yes its sorted :) Thank you ..
DeleteVery helpful! Thanks so much!!
ReplyDeleteyou are a genius and more so for sharing your intelligence!! thanks!!
ReplyDeletewww.homewithkeki.blogspot.com
So simple, so perfect! Thank you.
ReplyDeleteFantastic, worked great - thanks
ReplyDeletethanks for this... it really works... :)
ReplyDelete1
ReplyDelete2
3
4
5
.Image img{
display: block;
margin-left: auto;
margin-right: auto;
}
This code you provided was the ONLY one that worked to center my header image on blogger simple template. Thank you so much. would you happen to know how i could move that same image that i just centered using this code to be moved up a notch or two?
Get rid of the numbers (1 to 5). They're not suppose to be there, and they are disastrous. And to move up a little, try this one instead:
Delete.Image img{
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
}
CHECK MINE AT http://talk2gossip.blogspot.com/ AND http://careitonline.blogspot.com/ . I STILL NEED HELP
ReplyDeleteYour images seem to be already centered.
DeleteJust stumbled on to this post! Such great tips! Thanks for sharing!
ReplyDeleteI have several gadgets along my right sidebar and can never seem to get all of them centered. The "Follow by email" and a few of the sponsor buttons are always off and it drives me batty. Any help would be super appreciated!
www.livealittlewilderblog.com
Hi Sarah,
DeleteSee if this is what you're looking for. Add the following to your CSS:
#FollowByEmail1{
position: relative;
left: 10px !important;
}
This should bring your email gadget a little to the right. You can manually adjust the position of other gadgets as well, using the code above, but you need to change the ID of the right gadget. Here's how you can find a gadget's ID:
http://www.southernspeakers.net/2010/11/ids-and-classes-for-beginners.html
Just what I was looking for and so simple, thanks! x
ReplyDeletethank you very much for the tips! It's been so useful :D
ReplyDeletewww.violetdaffodils.com
xx
If you have any spare time, I would love some help on my blog. glenreber.blogspot.com
ReplyDeleteI've read through all your comments and original solution and can't get that image on the left sidebar centered.
Also, do you know of a way where I can put my pages tabs around my page title. For instance < Home, About Me, E PLURISBUS UNUM, Contact Info, Etc>
Thank you for helping me and so many others.
Go edit your CSS and look for:
Delete.Image img{
display: block;
margin-left: auto;
margin-right: aut
}
You've missed two characters there under margin-right. It should be:
.Image img{
display: block;
margin-left: auto;
margin-right: auto;
}
As for your pages gadget, I see it's placed below your title. Are you looking for a way to center it or something?
Worked perfectly, thank you for the help!
ReplyDeletehi yoga, thanks for your tips, they are awesome. i applied a customized feedburner link at the post footer which is working perfectly for my feed but it refused to show up on mobile even after adding mobile 'yes' . please how can i make the feedburner link appear in mobile? Thanks www.fitglowybay.com
ReplyDeleteHello there,
DeleteI went to your Desktop site to see the feedburner link but I couldn't find any. Is this still on?
How can I resize the image gadget? The picture is just way too big for my page.
ReplyDeletefourmoreformayer.blogspot.com
1) Right click on your image and get its url
Delete2) Remove the gadget
3) Add a new image gadget
4) Instead of uploading a new image, choose 'From the Web', and use the URL from Step 1. BUT, you need to change the number next to the 's' in the URL:
http://3.bp.blogspot.com/-o7fKlN6QoZU/VKIVcAzqD_I/AAAAAAAAAIg/sbECIL1S7GM/s325/about%2Bme.png
See that s325? Change it to s100 or something to make your image smaller, and use this in Step 4.
Worked! Not sure why the "enter" is necessary, but when I did that, it immediately centered. Thanks!
ReplyDeletethank you, it's extremely helpful :D
ReplyDeleteAfter trying to follow Bloggers instructions then trying instruction from probably a half dozen websites, all to no avail, I tried your method and held my breath just hoping I wasn't going to screwup my template. Like Linda above, I don't know why "enter" was the key, I just know that like magic, it worked. Thank you!!!!
ReplyDeleteDo you have css code to change to caption color on the sidebars? Can't find it anywhere
ReplyDeleteI can write a code if I get to see your blog. What's your blog's address?
DeleteYou are awesome!! So glad I found you....you're certainly gonna be bookmarked for future reference! HOPE you have a blessed SONday!
ReplyDeleteThank you Debbie! :D
DeleteCode works perfectly! Thanks! :D
ReplyDeletehttp://travelhardhannah.blogspot.com/
The code to center the image works perfectly but when I use the image gadget I get a gray border around the picture. Is there a way to remove that border? Thanks for the tips!!
ReplyDeletePretty sure the border you're seeing can be removed. Mind if I have a look at your blog?
DeleteAwesome, simple fix! Thank you!!
ReplyDeleteThat worked! Yay! Thank you so much!
ReplyDeleteawesome, you are lifesaver!!
ReplyDeleteI just stumbled upon your blog and this was just what I was needing for my big picture under my header and it was so simple! Thank you and may the Lord bless your efforts!!
ReplyDeleteThank you and may God bless you too :)
DeleteI have done it and it's perfect thanks a lot but what's the simplest way for me to make sure it's showing on mobile view? Because right now is not available on mobile. Though I actually created it for mobile view only
ReplyDeleteI'm afraid the tweaks you implement for the desktop view will not be brought over to mobile view. I'll let you know if I come across a way to get this done in mobile view.
DeleteI have created a responsive design. This code works perfectly in desktop. But on a mobile the images are still not getting aligned at center. What to do???
ReplyDeleteI'll give this a try on the mobile view when I get some time.
Deletethank you so much, this post is awesome ;)
ReplyDeleteThis worked! Awesome ty again..
ReplyDeleteSeven years after this info was posted and it's still helping. Much obliged.
ReplyDeleteHaven't noticed it has been that long. Good times :)
DeleteHi Yoga. I need to have the top two images on my Blog moved to the center but your CSS code did not work for me. Do you think you have a fix for this (see: https://rayceenpendarvis.blogspot.com/).
ReplyDeleteThanks in advance for any help you can provide.