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.

1
  • a couple revisions but I got it working finally...see below
    – Dan
    Jun 13, 2014 at 18:56

1 Answer 1

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

3
  • 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, 2014 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, 2014 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, 2014 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.