1

I'm trying to centre a div in a page, horizontally & vertically. This is acheived, but there is some left and right padding, in chrome. How to remove this. Works fine in firefox.

MyStyle.css :

html, body
{
  height:100%;
  margin:0;
  padding:0;
}

.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding:0;  
}

.row-fluid 
{
  height: 100%; 
  display:table-cell; 
  vertical-align: middle;  
}

.centering {
  float:none;
  margin:0 auto;
}

// bootstrap css for .container-fluid
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

HTML :

<div class="container-fluid">
        <div class="row-fluid" style="background-color: blue">
            <div class="centering text-center col-lg-1" 
                 style="background-color: green">
                Yeah I'm centered
            </div>
        </div>
    </div>

The blue color does not fill up the page in chrome, there is padding to the right & left.

Ruby
  • 117
  • 8

1 Answers1

1

Ok I figured it out. There is a pseudo-element called content being added in the CSS which is causing this issue. With the help of css: how to remove pseudo elements (after, before, ...) I found a solution, add this to your CSS:

.container-fluid:before{
    content:none;
}

.container-fluid:after{
     content:none;
}

And change your centering class:

.centering {
  float:none;
  margin:0 auto;
  padding-left:0px;
  padding-right:0px;
}

Bootply Demo

Community
  • 1
  • 1
Dan
  • 9,391
  • 5
  • 41
  • 73
  • that removes the padding in the green block. The color blue has to fill the page but there is padding to the page's right n left. Add 6px left n right padding to body{}. Thats how it looks right now – Ruby Jun 13 '14 at 18:38
  • That worked. But I also had to add a similar 'before' class to remove padding on left side as well. Thank you so much. – Ruby Jun 13 '14 at 18:59
  • Yeah I realized that after the fact and updated my answer...I like answering these types of questions b/c I learn a lot, I need to improve my CSS knowledge – Dan Jun 13 '14 at 19:00