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.

How to center a ul li list inside a centered div

Discussion in 'CSS' started by ketting00, Aug 30, 2015.

  1. #1
    Hi guys,
    I've done the research but I can't find any solution on the web. So I have a problem for you guys to help solve again. I hope you never mind.
    Let's go straight to what I'm trying to do.
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Centering things up</title>
            <style>
                html, body {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                body { font: normal 85%/150% sans serif; }
                ul { margin: 0; padding: 0; list-style: none; }
                #wrapper {
                    overflow: hidden;
                    padding: 1.5em 0;
                    margin: 0 auto;
                    max-width: 90%;
                }
                .myList li {
                    display: inline-block;
                    padding: 0.6em;
                }
                .badass {
                    display: block;
                    width: 16em;
                    height: 9em;
                    background: #BADA55;
                }
            </style>
        </head>
        <body>
            <div id="container"><div id="wrapper">
                <ul class="myList">
                    <?php for ( $i=0; $i<15; $i++ ) { ?>
                        <li><div class="badass"></div></li>
                    <?php } ?>
                </ul>
            </div></div>
        </body>
    </html>
    
    Code (markup):
    I want everything centered. How do I do it?
    Thanks,
     
    ketting00, Aug 30, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    What do you mean, "centered" - do you want one long list of green boxes down the middle of the page?
     
    PoPSiCLe, Aug 30, 2015 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    No,

    I've tried margin: 0 auto;. It isn't worked.
    I want the entire ul box to be centered on any devices' screen.
    Let's say center and center it again.

    I'm using a 1366px-wide notebook. It has three rows of boxes.

    Thanks,
     
    Last edited: Aug 30, 2015
    ketting00, Aug 30, 2015 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Since you made LI inline-block, I'm assuming you want them in horizontal lines, wrapping as needed. I don't understand why you set the height on LI's content block instead of letting it self-adjust.

    Setting UL to {text-align: center;} should do what you want. You may want to set LI {text-align: left;} to kill the centering for LI's text. Don't forget that your visitors likely have different sized monitors or browser windows. Your browser and monitor size don't matter.

    cheers,

    gary
     
    kk5st, Aug 30, 2015 IP
    deathshadow likes this.
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Something like this may work, but I am not sure if that's what you want:

    http://jsfiddle.net/rfn7pd86/24/


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Centering things up</title>
            <style>
                html, body {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                body { font: normal 85%/150% sans serif; }
                ul {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                #wrapper {
                    overflow: hidden;
                    padding: 1.5em 0;
                    margin: 0 auto;
                    max-width: 90%;
                }
                .myList li {
                    display: inline-block;
                    text-align: left;
                    padding: 0.6em;
                }
                .badass {
                    text-align: center;
                    display: block;
                    width: 16em;
                    height: 9em;
                    background: #BADA55;
                }
            </style>
        </head>
        <body>
          
    <div id="container">
        <div id="wrapper">
            <ul class="myList">
                <?php for ( $i=0; $i<15; $i++ ) { ?>
                <div class="badass"><li></li></div>
                <?php } ?>
            </ul>
            </div></div>
        </body>
    </html>
    Code (markup):
    Note: I swapped div's and li's here: <div class="badass"><li></li></div>
     
    Last edited: Aug 30, 2015
    qwikad.com, Aug 30, 2015 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Which is complete and utter gibberish invalid markup... You can't do that. The ONLY thing that can be a direct child of a UL is a LI! If you knew ANYTHING about HTML, you'd know that.

    I'm looking at this wondering what all the DIV are even for, why it's not leveraging the existing LI, etc, etc... As mentioned the size of your testing devices shouldn't matter since one should be thinking device-independant. You don't say 90% without a max-width for example so long lines on the page aren't hard to follow. You shouldn't be setting inline-block on a LI if you care about legacy browsers. That 16em fixed width on the child elements being an accessibility /fail/ when the screen gets smaller than that.

    Even just simple things like "if they're all getting the same class, none of them need classes"...

    I'm not sure what's actually trying to be accomplished here for layout or content, but I'm pretty sure this is not how one should go about it.

    GUESSING WILDLY:

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	rel="stylesheet"
    	type="text/css"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    
    <title>
    	Centering things up
    </title>
    
    </head><body>
    
    <div id="wrapper">
    	<ul class="myList">
    <?php 
    	for ($i=0; $i<15; $i++ ) echo '
    		<li></li>';
    ?>
    	</ul>
    <!-- #wrapper --></div>
    
    </body></html>
    Code (markup):
    With something like this for the CSS:

    /* 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,dl,dd,dt,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img, fieldset {
    	border:none;
    }
    
    hr {
    	display:none;
    	/*
    		HR in my code are for semantic breaks in topic/section, NOT
    		style/presenation, so hide them from screen.css users
    	*/
    }
    
    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    
    body {
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    #wrapper {
    	overflow:hidden;
    	padding:1.5em 0;
    	margin:0 auto;
    	max-width:72em;
    }
    
    
    .myList {
    	list-style:none;
    	text-align:center;
    	padding-top:1em;
    }
    
    .myList li {
    	display:inline-block;
    	width:16em;
    	height:9em;
    	margin:0 0.6em 1em;
    	background:#BD5;
    }
    Code (markup):
    But again I'm guessing WILDLY as I'm unsure your final desired appearance and it's hard to say what the proper markup would/should be without actual content.
     
    deathshadow, Aug 30, 2015 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #7
    I thought it's becoming less and less of an issue in html5 / <!DOCTYPE html>

    Isn't it where the development and browsers are heading anyway? But maybe I am missing something. I don't understand why's that an issue in 2015?

    But if someone is too pissy about that, they should use span instead of div.

    Or... change the badass div to UL:

    http://jsfiddle.net/rfn7pd86/25/
     
    qwikad.com, Aug 30, 2015 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Hi guys,

    Thanks for your help. Gary's suggestion works quite as expected. I didn't set the height of the div, just for this dummy since it has no content to fill in.

    I've to test @deathshadow method later, I didn't have time to do it now.

    @qwikad.com, the list, in this example case, has 15 li's. It in the for loop. In the real life it is in the foreach loop.

    What I'm trying to do is something like pinterest.com but not quite exactly.

    Cheers,
     
    ketting00, Aug 30, 2015 IP
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    qwikad.com, Aug 30, 2015 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    If I remember half way correctly, IE6 (?) didn't support inline-block, but you could stack {display: inline;} for old IEs followed by inline-block for browser that did support it. Old, really old Firefox required that the child of inline-block be a block element.

    As far as I'm concerned, anyone still using either has earned and therefore deserves what they get. If the client insists, I will apply a fix at additional remuneration. And lots of it.

    cheers,

    gary
     
    kk5st, Aug 30, 2015 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    7 still had problems with it on non inline-level elements, and with 8 if you set a child element to block you'd have something similar to the staircase effect occur, or worse if you have anchors involved there's a magic "2 pixel growth in height" on hover that nobody could find an explanation for.

    Which is why I'd avoid the extra DIV entirely. Again, my rule of thumb is avoid adding div and span until AFTER you've expended what you can do to the semantic tags.

    IDEALLY I'd have a span or anchor inside the LI I'd be setting to inline-block and set the LI to 'inline' and completely forget they exist -- but that would hinge on the actual content of the page and what this list ACTUALLY consists of.
     
    deathshadow, Aug 30, 2015 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    Agreed. I think you have to go back to FF2.x to need the block content. In any case, there's no need for the div as LI is a perfectly good container.

    g
     
    kk5st, Aug 31, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    HTML 5 "removes" the block-level inside inline-level tag part -- that horrible dumbass decision on their part (I'm such a fan) is leading to people thinking that means ALL the structural rules have been tossed in the trash. That's NOT the case. It's the same mistake people made turning "Don't use tables for layout" into "Don't ever use tables" - or the nonsense where people read "EM and STRONG should be used when their semantic meaning is more appropriate than I and B" yet magically turned that into "Never use I and B" -- to the point some people started talking out their ass calling them deprecated when they clearly were not. It's called literacy folks, try it, it's nice!

    Really though HTML 5 pisses all over semantics and logical document structure with it's pointlessly redundant SECTION, ARTICLE, HEADER and NAV tags, attempting to outright ignore the meanings of numbered headings, and on the whole reeking of having been built by and for people who never embraced semantic markup or HTML 4 Strict. You can see the WHATWG knew jack **** about document structure with their idiotic "HGROUP" tag that the W3C FINALLY said "OH HELL NO!" to. It's like the mouth-breathing dumbass nonsense of people pairing H1+H2 or H2+H3 for a title and a tagline (what HGROUP was supposed to match) -- COMPLETELY missing what headings MEAN!

    It's why more and more people teaching the topic who actually know what they are talking about are saying write 4 Strict, then deploy as 5.

    Now that said... MOST of the structural nesting rules are alive and well in HTML 5. It's clear as a bell if you understand how to read the specification as they've added a "content model" section to each tag:

    http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-ul-element
    "script supporting elements" means just two tags, SCRIPT and TEMPLATE.
    http://www.w3.org/TR/html5/dom.html#script-supporting-elements-0

    That means the ONLY valid direct children of a UL (or OL) is LI, SCRIPT or TEMPLATE. From an engineering standpoint I'd have thought NOSCRIPT would be there too, but the treatment of NOSCRIPT by the specs has always been rubbish... almost as big a steaming maggot ridden pile as most people's use of scripting.

    There are RULES for what can go inside of what -- LINK has been invalid inside BODY since 1998 for example. Sadly, MOST of the people sleazing out their outdated HTML 3.2 style markup and slapping 4 tranny on it or 5 lip-service around it don't know these rules, have never encountered these rules, and as such are NOT qualified to be writing a blasted line of markup.

    USED to be the fault of the specification stating things like this using DTD language, so normal people couldn't follow it. I mean, look at how 4 STRICT explained the same thing:

    Yeah, normal people would understand that means only LI are valid as children of it. Again though, DTD was SUPPOSED to be for people creating browsers (or for browsers to actually use to interpret the markup), NOT for people writing websites. That's why the DTD was a link to a copy of it, if the browser didn't know the spec it could go get it -- allowing new specifications to be implemented on the fly WITHOUT changing the browser engine. Yeah, that got implemented, sure it did.

    The natural language explanation of HTML 5 removes that excuse. It's one of the few things in HTML 5 I approve of is the clearer explanations of these rules, as well as clarifying the meaning of tags like HR.

    In that way though, the HTML 5 specification feels like dealing with a schizophrenic -- much of the text is well written and clear, and the way it's documented IS superior, but the specification itself seems to have been made by people who completely missed the reason HTML even exists in the first place... IMHO that's most likely the result of too many cooks spoiling the stew.

    Happens when specifications are built by committee instead of by a benevolent dictator.

    I've actually been playing with the idea of making my own spec just for the **** of it.... base it off 4 STRICT, follow the intent of 4 STRICT, but to document it clearly in English instead of legalese from the point of view of people WRITING websites, and not from just the perspective of browser implementation.

    NOT that browser implementation apart from "these are the tags" should even be in a markup specification, since markup should be about MEANING -- what things ARE -- and not about what they look like or even how the browser handles them. That's HTML's original intent and purpose so that the user-agent (browser) could best convey that meaning within the capabilities of the device being used -- be it a braille reader, screen reader (aka a program that reads the text aloud to you), teletype, Videotex terminal, NeXT workstation or a bleeding edge 4k display. That's what it's SUPPOSED to be for! Written PROPERLY HTML should be usable for users of ALL devices past and future...

    Again, why if you choose tags based on their default appearance, you're choosing all the wrong tags for all the wrong reasons!

    P.S. Despite HTML 5 claiming it's fine, block-level inside inline-level can STILL cause rendering headaches across different browsers -- Safari and IE9/earlier in particular, though FF has a few quirks of it's own on that. :(

    But what can one expect when major browsers like Firefox still have unaddressed 17 year old bugs in their HTML 4 implementation -- and we're supposed to magically expect a NEW specification to be reliable?

    The W3C, browser makers, and even most people writing websites do NOT have the track record for that.
     
    Last edited: Aug 31, 2015
    deathshadow, Aug 31, 2015 IP
    qwikad.com likes this.