CODEWITHSUNDEEP
htmlcsscentercentering
Ryan Peschel
Ryan Peschel

Reputation: 11828

How to center body on a page?

I'm trying to center the body element on my HTML page.

enter image description here

Basically, in the CSS I set the body element to be display: inline-block; so that it is only as wide as its contents. That works fine. However, margin: 0px auto; doesn't center it on the page.

Does anyone know how to fix this? I want the big blue square to be centered on the page, not floating to the left like it is now.

Here's my CSS:

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}

Upvotes: 32

Views: 237791

Answers (6)

Jakob
Jakob

Reputation: 71

I tried to combine the good things about both usefull answers here:

  • Using dom instead of raw text grep let's headings have attributes (id's won't be replaced)
  • Show document structure (having ols in ols)
  • If starting with al lower heading (e.g. h3) and insterting a higher one (e.g. h1) afterwards the latter will be lost.

addEventListener("DOMContentLoaded", (event) => 
            {
                var toc = document.getElementById('toc');
                var headings = [].slice.call(document.body.querySelectorAll('h1, h2, h3'));
                var prevLevel = 0
                var parent = toc;
                headings.forEach(function (heading, index) 
                {
                    var level = parseInt(heading.tagName[1]);
                    if(prevLevel < level) 
                    {
                        var newParent = document.createElement("ol");
                        parent.appendChild(newParent);
                        parent = newParent;
                    }
                    else if(prevLevel > level && parent.parentNode !== toc)
                    {
                        parent = parent.parentElement;
                    }
                    
                    var anchor = document.createElement('a');
                    anchor.setAttribute('name', 'toc' + index);
                    anchor.setAttribute('id', 'toc' + index);

                    var listEntry = document.createElement('li');
                    var link = document.createElement('a');
                    link.setAttribute('href', '#toc' + index);
                    link.textContent = heading.textContent;

                    listEntry.appendChild(link);
                    parent.appendChild(listEntry);
                    heading.parentNode.insertBefore(anchor, heading);
                    
                    prevLevel = level;
                });
            });

PS: not sure whether ol > ol is legal, might need ol > li > ol techincally but it works :)

Upvotes: 0

collapsar
collapsar

Reputation: 17238

Exploiting the flex layout is another option. Add to your CSS:

html {
    display: flex;
    justify-content: center;
}

Tested in Chrome, Edge, Firefox.

More Info can be found in the refs at MDN and hosts of online tutorials (this one seems handy as it is organized around container/item roles in the flex layout).

Upvotes: 4

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175017

Also apply text-align: center; on the html element like so:

html {
  text-align: center;
}

A better approach though is to have an inner container div, which will be centralized, and not the body.

Upvotes: 34

DardanM
DardanM

Reputation: 95

For those that do know the width, you could do something like

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

I also agree about not setting text-align:center on the body because it can mess up the rest of your code and you might have to individually set text-align:left on a lot of things either then or in the future.

Upvotes: 3

SRN
SRN

Reputation: 2455

You have to specify the width to the body for it to center on the page.

Or put all the content in the div and center it.

<body>
    <div>
    jhfgdfjh
    </div>
</body>​

div {
    margin: 0px auto;
    width:400px;
}

​

Upvotes: 9

Freakishly
Freakishly

Reputation: 1571

    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

This will work on most browsers, including IE.

Upvotes: 38

Related Questions