1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Vertically AND Horizontally Center img

Discussion in 'CSS' started by Tony Brar, Aug 22, 2013.

  1. #1
    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
     
    Tony Brar, Aug 22, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    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.
     
    wiicker95, Aug 28, 2013 IP
  3. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #3
    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
     
    Tony Brar, Aug 28, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Aug 31, 2013 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    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
     
    kk5st, Aug 31, 2013 IP
  6. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #6
    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
     
    Tony Brar, Sep 2, 2013 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    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
     
    kk5st, Sep 2, 2013 IP
  8. Tony Brar

    Tony Brar Active Member

    Messages:
    220
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    #8
    Got it! I just don't want to spend half my time on perfect IE 6 compatibility.

    Thanks,
    -Tony
     
    Tony Brar, Sep 2, 2013 IP
  9. uCoz_Andrew

    uCoz_Andrew Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    CSS you need to clean, better write a short record. :)
     
    uCoz_Andrew, Sep 4, 2013 IP
  10. rainborick

    rainborick Well-Known Member

    Messages:
    424
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    120
    #10
    rainborick, Sep 5, 2013 IP