How do I center a div and center a ul list inside it again

HTML & CSS
1

Hello guys,

I’ve tried to center a ul list inside a div that is being centered, but I ain’t go anywhere. It isn’t worked no matter what I tried. Hope you can help me.

[code]

Centering things up 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; }
    <?php for ( $i=0; $i<15; $i++ ) { ?>
    • <?php } ?>
[/code] Thanks,
2

Best guess:

<!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; }
#wrapper {
    max-width: 90%;
    padding: 1.5em 0;
    margin: 0 auto;
    outline:1px dashed blue;  /* TEST Outline */
}
.myList {
    list-style: none;
    text-align:center;
    padding: 0;
    margin: 0 auto;
    outline:1px dotted magenta;  /* TEST Outline */
}
li {
    display: inline-block;
    padding: 0.6em;
}
.badass {
    width: 16em;
    height: 9em;
    background: #BADA55;
}
    </style>
</head>
<body>

<div id="container">
    <div id="wrapper">
        <ul class="myList">
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
            <li><div class="badass"></div></li>
        </ul>
    </div>
</div>

</body>
</html>
3

Thank you,

Hmm, look kind of weird. But that was what I’m trying to do.
I’ve to work more on it.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.