Is this how to center my avatar on Tumblr?

Question

I'm not sure what you would need to see exactly, but how about this?

#wrapper #sidebar {
position: relative;
width: 210px;
float: left;
color: {color:Text};
font-family: Verdana;
}

#wrapper #sidebar #top #avatar {
width: 146px;
height: 146px;
padding: 8px 0 0 9px;
background: url('http://static.tumblr.com/vr9xgox/mi9nf8t4z/avatar-bg.png') top left no-          repeat transparent;
position: relative;
top: -20px;
left: 26px !important;
}

I just added

left: 26px !important;

to fix it. It does get in the center, but I can't tell if it's actually in the center? It doesn't seem like it. Maybe I've just been staring for too long.

And here's the div, if you would need that. I'm not sure.

<div id="avatar"><a href="/"><img src="{PortraitURL-128}" /></a></div>

Thanks in advance!

Are you trying to center the avatar you have on Stack Overflow? — BSMP, Jul 10 '15 at 17:35
No, my avatar on Tumblr. I should have clarified, sorry. I'll edit that in now. — Kate Fdf, Jul 10 '15 at 17:41

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You could try adding margin:auto; display: block; to the CSS of #wrapper #sidebar #top #avatar.

Here's a link from a similar question: CSS: center element within a <div> element. It's not Tumblr-specific, but it contains info on HTML and CSS.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 10 '15 at 17:42

genoards

16
3

Padding will move the image, and while it may look centered on your screen, it will not always be centered across different browser sizes. – genoards Jul 10 '15 at 17:43
This may be a dumb question, but what should I do about the padding then? When I add the margin without deleting the padding, it's still a little off-center, but the avatar is still in tact with the background of the avatar. When I add margin AND delete the padding, the background of the avatar is perfectly centered. However, the avatar itself is not. It moves over left and up a little bit. I should note I also deleted the left margin I had in the original post. Did that mess it up? – Kate Fdf Jul 10 '15 at 18:01
On second thought, try adding `display: block;` to `#avatar`'s CSS. This is what usually works for me. I'm sorry; I forgot to put it in the original answer. I hope that helps! – genoards Jul 10 '15 at 18:10
I can't copy/paste at the moment, so I had to get someone else to do the screenshots for me. I don't remember the coding to insert images here by heart, so I can't. Apologize for that. Anyways, I tried adding that, and it looks the same. Like this: i.imgur.com/WFXTw2n.png When I re-add the padding, and keep the display: block, it looks like this: i.imgur.com/CF0j70Y.png which is exactly what I meant how it looked before with the padding. Is it centered? It looks like it's not, but the first image looks like it is. Just need to get the avatar back in there. I apologize for all this! – Kate Fdf Jul 10 '15 at 18:31
No worries. Try adding `margin:auto;' to `#wrapper #sidebar #top`? It's really difficult to tell from a screenshot like this. – genoards Jul 10 '15 at 18:36

score 0 · Answer 2 · answered Jul 10 '15 at 20:28

#wrapper #sidebar #top #avatar {
  display: block;
  margin: 0 auto;
}

I saw you are using 'top left' for background image:

background: url('http://static.tumblr.com/vr9xgox/mi9nf8t4z/avatar-bg.png') top left no-repeat;

Try to use 'center center' instead of 'top left'

Is this how to center my avatar on Tumblr?

2 Answers2