Menu
I'm trying to center the body element on my HTML page.
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; } 
737
The <center> HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element.
Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.
You do this by setting the display property to “flex.” Then, define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
body { width:80%; margin-left:auto; margin-right:auto; } This will work on most browsers, including IE.
77
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
