-1

According to this answer, putting display: block; float: none; position: relative; in a selector should ensure that the margin: 0px auto trick to horizontally center an element works. This is my code for attempting to center the body within the html element:

body {
    background-color: lightgray;
    float: left;
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;

    margin: 0px auto;
    /* Adding these last 3 doesn't seem to make a difference */
    display: block;
    float: none;
    position: relative;
}

When I specify the pixels manually like 0px 500px, it works out fine. Does anyone know why auto doesn't seem to be working in this case?

edit: Guys, it doesn't work even when I specify the width for the body. https://jsfiddle.net/ozm2x9zx/

James Ko
  • 32,215
  • 30
  • 128
  • 239
  • trying to center the `body` or specific `div`? If you can give a fiddle it would be easier to help!! :) – NoobEditor Jan 15 '18 at 05:13
  • Hi James, please remove float:left. Then it will be fine – estin sunny koothoor Jan 15 '18 at 05:33
  • Author of that answer here. You don't need to specify those things explicitly. You just need to get rid of the float: left declaration as others have told you. The code in your question and the code in your fiddle don't match. Are you sure you linked to the right fiddle? – BoltClock Jan 15 '18 at 06:21

4 Answers4

1

You have to mention width to make it center.

<style>
    body {
        margin: auto;
        width:50%;
    }
</style>

And also no need to mention px for 0(Zero) values.

estin sunny koothoor
  • 201
  • 1
  • 10
0

You missed the 4th point in that answer your referred to:

  1. The element must have a width that is not auto

Which was then explained in the notes:

Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".

So add a width to your body and you will see it working. Ah, but here is the catch: you are applying it to the body, not any element on the page. It works, but you will not see the effect unless you make the color of the html different from the body. Try this:

html {
  background-color: red;
}

body {
  background-color: lightgray;
  float: left;
  font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
  margin: 0 auto;
  display: block;
  float: none;
  position: relative;
  width: 70%;
}
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
  • I appreciate your efforts; I've specified the width and it's still not working, however. Can you take a look at the JSFiddle I posted in the edit to my question? – James Ko Jan 15 '18 at 05:23
  • It does work, but you have other issues in your CSS. Here is a [forked fiddle](https://jsfiddle.net/5p75tbyq/). I replaced all your CSS with the one from my answer above, so you can see it working. When you set the width to `960px`, your monitor must be really big for you to see it in the fiddle result (which takes less than half the screen). You need to change the width on both the `body` and `#container`, and you will start to see red margin to the right. Then you have to fix other issues (e.g. delete the line for `float: left;`). Here is a [forked fiddle](https://jsfiddle.net/xnj193rs/). – Racil Hilan Jan 15 '18 at 05:43
  • You don't need to color the html element differently. The effect should be apparent just from the content margins getting adjusted (assuming you have a wide enough display). – BoltClock Jan 15 '18 at 06:26
  • @BoltClock If you copy the code from my answer to a blank HTML page (only ``) you'll see the red margins. Comment out the CSS line for `html`, and you'll see nothing but grey. When I posted my answer, the OP didn't have the fiddle and there was only the CSS, so I had no idea what HTML and CSS was used. The color for the `html` element is required in certain circumstances. – Racil Hilan Jan 15 '18 at 06:45
  • I am, of course, commenting under the additional assumption that there is content, because there's a pretty good chance that assumption is true ;) (so good, that I forgot to state it along with the display one!) – BoltClock Jan 15 '18 at 06:47
  • @BoltClock Even with some basic content, you will still not see the margins. Try adding some text, `

    `, and `

    `, still all grey background. Yes, there is a good chance your assumption is true, but there is enough chance it isn't. Again, I had no idea how the OP was testing the CSS. Even if testing on a page with some content, there is still enough chance to only see grey and think it wasn't working.
     – Racil Hilan Jan 15 '18 at 06:58
  • `data:text/html,

    hello` results in hello being rendered with a horizontal offset, rather than flush against the left edge of the viewport. That's what I meant by content margins, and not needing to change the color of html to see them. But I apologize for making this more complicated than it needed to be.

     – BoltClock Jan 15 '18 at 07:02
  • @BoltClock No need to apologize, if anything I thank you for stopping by. Now I see what you meant. Yes, I fully agree. It doesn't need the color to work. That's what I meant when I said in my answer *It works, but you will not see the effect*. Not knowing anything about the content and judging by the grey color set on the body, I thought that there was a good chance for the effect to be judged by color boundaries rather than by some text or element shifting a bit. What I meant is: set the color on html so you see the effect clearly, once done testing, the color can be removed if not needed. – Racil Hilan Jan 15 '18 at 07:34
  • Yeah, I see what you mean now. Glad we cleared things up. – BoltClock Jan 15 '18 at 07:37
0

You need to remove float, off of your body element and your container sits in the middle perfectly.

Also, there is no need to attribute the unit type, (px), on a value of zero.

Consider:

  body {
        background-color: lightgray;
        background-image: url('../images/brushed.png');
        background-repeat: repeat;
        font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
        margin:0;
    }

    div#container {
        background-color: #aaaaaa;
        color: white;
        width: 960px;
        margin: 0 auto;
    }
C. Morett
  • 45
  • 1
  • 6
0

I just remove float:left; from body, and it is centered +

most of the time -> margin:0px auto; will work fine with display:table;

<html>
    <head>
        <title>My Favorite Films</title>

        <link type="text/css" rel="stylesheet" href="css/site.css" />

        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
  
  <style>
body {
    background-color: lightgray;
    background-image: url('../images/brushed.png');
    background-repeat: repeat;
    //float: left;  //removed
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
    margin: 0px auto;
    width: 960px;

}

div.clear-float {
    clear: both;
}

div.home-page-images {
    float: left;
    margin: 0px 0px 0px 25px;
}

div#container {
    background-color: #aaaaaa;
    color: white;
    width: 960px;
}

div#footer {
    background-color: gray;
    margin-top: 50px;
    padding: 5px 0px;
    text-align: center;
}

div#header {
    padding: 50px 0px;
}

div#nav {
    font-family: 'Playfair Display', serif;
    float: left;
    text-transform: uppercase;
    width: 200px;
}

div#nav a:hover, div#nav a:active {
}

div#nav a:link, div#nav a:visited {
    color: white;
    text-decoration: none;
}

div#nav li {
    margin: 0px 0px 20px 0px;
}

div#nav ul {
    list-style-type: none;
    overflow: hidden;
}

h1 {
    text-align: center;
}

h1.home-page-header {
    color: #bf0000;
    font-size: 60px;
}

img.home-page-image-row1 {
    float: left;
    width: 300px;
    height: 175px;
    margin-left: 50px;
    margin-top: 50px;
}

img.home-page-image-row2 {
    float: left;
    width: 250px;
    height: 150px;
    margin-left: 50px;
    margin-top: 50px;
}
  
  </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1 class="home-page-header">My Favorite Films</h1>
            </div>

            <div id="content">
                <div id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="black_mirror.html">Black Mirror</a></li>
                        <li><a href="hoc.html">House of Cards</a></li>
                        <li><a href="inception.html">Inception</a></li>
                        <li><a href="interstellar.html">Interstellar</a></li>
                        <li><a href="st.html">Stranger Things</a></li>
                    </ul>
                </div>

                <div class="home-page-images-row1">
                    <img src="images/black_mirror_cover.jpg" class="home-page-image-row1" />
                    <img src="images/hoc_cover.jpg" class="home-page-image-row1" />
                    <div class="clear-float"></div>
                </div>

                <div class="home-page-images-row2">
                    <img src="images/inception_cover.jpg" class="home-page-image-row2" />
                    <img src="images/interstellar_cover.jpg" class="home-page-image-row2" />
                    <img src="images/st_cover.jpg" class="home-page-image-row2" />
                    <div class="clear-float"></div>
                </div>
            </div>

            <div class="clear-float"></div>

            <div id="footer">
                <h3>My Favorite Films</h3>
                <h4>By James Ko</h4>

                <p>Copyright &copy; 2017 James Ko. All rights reserved.</p>
            </div>
        </div>
    </body>
</html>
Tushar Acharekar
  • 880
  • 7
  • 21