10

Okay I understand that this topic has been covered. But I have looked at various solutions and have had little success with them.

I just have no clue why this margin: 0 auto; is not working. I tried compensating the padding with width: calc(33% - 40px);, but this did not work.

Any help on why this is happening, with solutions would be greatly appreciated!

.container {
  margin: 0 auto;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}
<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>

    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/xm2gvzbf/5/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
JP Foster
  • 1,725
  • 4
  • 17
  • 23

6 Answers6

13

It is working.

The problem is you're centering a div, which is a block-level element by default, and which therefore occupies 100% width of its parent (body, in this case). So there's no space to move horizontally, hence no space to center.

For an illustration see this revised demo which has an added border around .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}
<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>
    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

If you reduce the width of .container you'll see the centering work. Here's a second demo, with width: 50% applied to .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
  width: 50%;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}
<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>
    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks that's helpful! But here's the catch. I do want it to be around 90%. Since the data presented on the page will vary considerably. Sometimes the data will occupy 90% of the page, while other data will occupy 20% of the page width. Is there a solution to this? Either way, I want it to look centered. I fear that forcing a fixed width like 500px. That it will not be responsive with various data. – JP Foster Mar 05 '16 at 17:29
  • 1
    You can make `.container` a flexbox, and then center the content. Then you don't need to worry about `width` of `.container`. http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Mar 05 '16 at 17:32
1

It actually works, but without specifying the width it takes full 100%. Try something like:

   .container {
    margin: 0 auto;
    width:50%;
    }

Hope this may help

Alexander Bell
  • 7,842
  • 3
  • 26
  • 42
1

You should specify the width of the div for margin:auto to work. try to use width in percentage to make your div responsive as well.

Leo The Four
  • 699
  • 9
  • 14
0

You should set a width on .container to let the margin: 0 auto; work. See the updated JSfiddle.

Roy
  • 7,811
  • 4
  • 24
  • 47
0

Another fix that worked for me was to change the display for the parent to display: inline in the CSS and set a max-width so that margin auto centers the text. So far, that has fixed the problem. Not sure if it's the best solution, but it's currently working. See the code below:

.parent-container{
    display: inline;
    max-width: 500px;
    padding: 20px; 
    margin: 0 auto; 
}
jjcruz29
  • 1
0

For an element which its display is block and its width is determined, we can center it horizontally with margin: sth auto; Note: If width of the element equals the width of its parent the result could not be seen.

M Shafaei N
  • 409
  • 3
  • 6