CODEWITHSUNDEEP
htmlcsscentermargin
user5512178
user5512178

Reputation:

How to exactly center content within it's parent?

to better understand the css box model I did some exercising today. My goal is to exactly center the unordered list within its parent div. I know that i have to manually set a width in order to use margin 0 auto, but as you can see, the unordered list isn't perfectly centered with the paragraph text, because the li elements have a width of 80%. Is there any chance to automatically set the width to the longest li element or do i have to try to set the width manually as close as possible to the text ending?

I hope you guys know what i try to explain here :D

And here's the code:

#wrapper {
    border: 5px solid black;
    width: 50%;
    margin: 0 auto;
}

#first {
    box-sizing: border-box;
    border: 5px solid black;
    width: 50%;
    margin: 10px auto;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style: none;
    
}

#first li {
    border: 2px solid green;
    width: 80%;
    margin: 0 auto;
    white-space: nowrap;
}

#second {
    list-style: none;
    padding: 0;
    border: 2px solid pink;
    width: 50%;
    margin: 0 auto;
}

#second li {
    border: 2px solid blue;
    margin: 0 auto;
}
    <body>
        
        <div id="wrapper">
            
            <ul id="first">
                <li>Item 1</li>
                <ul id="second">
                    <li>Item 1.1</li>
                </ul>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            
            <p>Retro 3 wolf moon DIY, crucifix letterpress literally ethical. Brunch ethical shabby chic mumblecore, cronut ramps cred. Single-origin coffee marfa helvetica heirloom, cold-pressed flexitarian tumblr vinyl pop-up mlkshk cronut direct trade twee brunch. Ramps beard roof party, echo park whatever bespoke direct trade seitan. Etsy small batch dreamcatcher, photo booth fashion axe tilde fixie sriracha hammock beard squid craft beer. Banh mi yr green juice, truffaut DIY crucifix chartreuse tacos hoodie readymade vinyl occupy four loko try-hard. Retro knausgaard paleo, tousled blue bottle cornhole letterpress.
            </p>
            
        </div>
    </body>

Upvotes: 0

Views: 67

Answers (2)

sudo_dudo
sudo_dudo

Reputation: 581

Use text-align property. just added it to css of #first li 

#wrapper {
    border: 5px solid black;
    width: 50%;
    margin: 0 auto;
}

#first {
    box-sizing: border-box;
    border: 5px solid black;
    width: 50%;
    margin: 10px auto;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style: none;
    
}

#first li {
    border: 2px solid green;
    width: 80%;
    margin: 0 auto;
    white-space: nowrap;
  text-align: center;
}

#second {
    list-style: none;
    padding: 0;
    border: 2px solid pink;
    width: 50%;
    margin: 0 auto;
}

#second li {
    border: 2px solid blue;
    margin: 0 auto;
}
    <body>
        
        <div id="wrapper">
            
            <ul id="first">
                <li>Item 1</li>
                <ul id="second">
                    <li>Item 1.1</li>
                </ul>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
            
            <p>Retro 3 wolf moon DIY, crucifix letterpress literally ethical. Brunch ethical shabby chic mumblecore, cronut ramps cred. Single-origin coffee marfa helvetica heirloom, cold-pressed flexitarian tumblr vinyl pop-up mlkshk cronut direct trade twee brunch. Ramps beard roof party, echo park whatever bespoke direct trade seitan. Etsy small batch dreamcatcher, photo booth fashion axe tilde fixie sriracha hammock beard squid craft beer. Banh mi yr green juice, truffaut DIY crucifix chartreuse tacos hoodie readymade vinyl occupy four loko try-hard. Retro knausgaard paleo, tousled blue bottle cornhole letterpress.
            </p>
            
        </div>
    </body>

Upvotes: 0

Gershom Maes
Gershom Maes

Reputation: 8170

I am quite confident that the following is the best possible way to vertically center ANYTHING. That means that you don't need to care about the parent's size, the child's size, or anything at all. Seriously.

Fiddle: http://jsfiddle.net/h1zd0z5c/5/

The major trick here is: Make the child display: inline-block!!!!! As you'll see this will facilitate centering along both axes.

There's 2 different aspects to it:

1) Horizontal centering

Super easy! Because the child is inline-block, all we need to do is set text-align: center on the parent.

2) Vertical centering

Here's the tricky part. We'll use vertical-align: middle on the child to accomplish this. It sounds like it should do exactly what we want, doesn't it? There's a gotcha here however, and it's one of the most poorly understood aspects of css that I regularly encounter: vertical-align is not relative to the parent's size - it's relative to the tallest sibling!

So the hack around this is to ensure that the child element ALWAYS has a sibling that is height: 100% so that the height of the tallest sibling is the same as the height of the parent. Personally, I find that the most elegant way to accomplish this is to take advantage of the before pseudo-selector (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore) to insert 100% height content in the parent.

Check out the fiddle - it leaves you with 2 highly reusable classes that just need to be applied to parent and child element; the .centered-content, and .centered-content > .content elements.

Note

You asked to center a ul element which is no problem, but just note that in the example I decided to remove the ul's padding - this is because ul elements have a decent bit of left-padding which causes them to appear as if they aren't centered even when they really are.

Upvotes: 1

Related Questions