Vertically AND Horizontally Center img

Hello Digital Point,

I need some help with my CSS.
I want to position the .usericon img in the center of the containing div element.
How would I do that?
Here is my code:
http://jsfiddle.net/fortninja/qfpZL/36/

Thanks,
-Tony

 

Lose the float on that wrapper div and give it text-align:center instead. You can't center floats.
And oh, those classes you have are useless.

 

Which classes are useless?
By the way, if you check the latest revision of this fiddle, you'll see that changing margin to some percent fixed the problem.
http://jsfiddle.net/fortninja/qfpZL/41/

-Tony

 

As Wiicker95 said, the markup could use a bit of help and a few less classes. Usually if every container inside a element is getting the same class, NONE of them need classes. I'd probably also use a numbered heading on the user name (picking the heading level as appropriate to where it is on the page). DIV would be better than line-breaks to target the entire data line with the class to say what they are, and B would probably be better than all those SPAN since you are indicating they are different as they would be when written. (whereas span is neutral)

So something like this:

<div class="userInfo">

	<div class="avatar">
		<img
			src="http://placekitten.com/100/100"
			alt="User Avatar"
		/>
	<!-- .avatar --></div>
	
	<div class="info">
		<h2><!-- adjust heading level as appropriate -->
			<a href="https://fortNinja.com">FortNinja</a>
			<span class="online" title="FortNinja is Online"></span>
		</h2>
		<div class="coins"><b>Coins:</b> 100</div>
		<div class="uploads"><b>Uploads:</b> 6</div>
		<div class="streak"><b>Streak:</b> 3 Days</div>
		<div class="lastSeen"><b>Last Seen:</b> June 22, 2013 at 11:29</div>
	<!-- .info --></div>
	
<!-- .userInfo --></div>

Code (markup):

As to centering that image - These days I'd probably use display:table on the outer container and display:table-cell on DIV inside it. Doesn't work in IE7/earlier so you'd have to throw a float at that using selector hacks or CC's (I prefer the former)... that means it wouldn't center top to bottom in IE7/earlier -- really, OH WELL. People who can't join us in THIS century should be thankful we bother making the page work at all.

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	background:#000;
}

.userInfo {
	zoom:1; /* wrap floats for legacy IE */
	padding:0.5em 1em;
	margin:1em;
	font:bold 100%/125% arial,helvetica,sans-serif;
	background:#555;
	border:3px solid #520;
}

.userInfo .avatar {
	*float:left; /* IE7- doesn't know display:table-cell */
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding-right:1em;
}

.userInfo .avatar img {
	display:block;
	border:5px solid;
	border-color:#4C4 #080 #080 #4C4;
}

.userInfo .info {
	display:table-cell;
	vertical-align:top;
}

.userInfo h2 {
	font:bold 200%/120% arial,helvetica,sans-serif;
}

.userInfo h2 a {
	color:#FFF;
	transition:color 0.25s;
}

.userInfo h2 a:active,
.userInfo h2 a:focus,
.userInfo h2 a:hover {
	color:#8FC;
	text-shadow:0 0 0.2em #6C9;
}

.userInfo h2 span {
	display:inline-block;
	font-size:0.6em;
	vertical-align:middle;
	width:1em;
	height:1em;
	background:#C00;
	border-radius:0.5em;
	box-shadow:inset 0 0 0.25em #000;
}

.userInfo h2 .online {
	background:#0F0;
}
.userInfo b {
	font-weight:inherit;
	color:#CCC;
}

.userInfo .coins {
	color:#EB0;
}

.userInfo .uploads {
	color:#0CC;
}

.userInfo .streak {
	color:#2A2;
}

.userInfo .lastSeen {
	color:#EEE;
}

Code (markup):

Note I also use CSS3 to make the 'online' status. If you omit the class it will display a red ball instead.

I put a live demo up on my server here:
http://www.cutcodedown.com/for_others/tonyBrar/centering/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/tonyBrar/centering/

is open for easy access to the bits and pieces. Works perfect in IE9/newer and all modern browsers, works 'ok' in IE8 just losing the CSS3 stuff, degrades gracefully to IE7 which doesn't center top to bottom the avatar... Which again, OH WELL!

Hope this helps.

 

Years ago, ~7, I wrote an article on vertically centering inline content. The major problem in need of solution was IE6/7. As is usually the case, someone somewhere had already figured it out, so I just wrote it up. See Centering inline elements.

Frankly, I wouldn't give a rat's patootie about obsolete browsers, except to ensure the site was usable. If the OP feels differently, the solution is given.

cheers,

gary

 

Although I want to ensure the site is usable, I don't really care about anything else with browsers <IE 10, my website won't even be up for a while and I don't have a business site that depends on support for all browsers.
I just have an IE conditional comment prompting the user to upgrade if they have an old browser.

-Tony

 

You're good to go then.

You might not want to do the prompt thing. If you've done a good job with your markup and stylesheets, users with older browser might not even notice. Another thing is that MSFT wants to up-sell, so they don't always make the new stuff backward compatible. Your visitors with old Win versions know they're not up to date, but may not be able to do anything about it. Just make your site usable by everyone and don't beat anyone over the head about their apps.

cheers,

gary

 

Got it! I just don't want to spend half my time on perfect IE 6 compatibility.

Thanks,
-Tony

 

CSS you need to clean, better write a short record.

 

Smashing Magazine has the best article on horizontal and vertical centering that I've seen. Simple, effective, with no gimmicks required.