1

I am using Bootstrap to make a frontpage with a div that is centered horizontally and vertically within the page. However, I am facing some styling issues. The margin-left does not seem to apply when using a class.

Here's the HTML5 markup:

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-lg pad-left">Login</button>
        <button type="button" class="btn btn-primary btn-lg pad-left">Register</button>
    </div>
</div>

Here's the CSS markup:

body{
    background-image: url('http://images.alphacoders.com/234/234641.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

div.btn-group{
    outline: 1px solid red;
    width: 20%;
}

.pad-left{
    margin-left: 10px;
}

Also, what are the best practices to center a div horizontally and vertically?

Tarang Hirani
  • 560
  • 1
  • 12
  • 43
  • Your code doesn't really show the centering of the container. On the other hand, centering vertically is not supported with CSS yet. The HTML 5 Flexbox spec makes this possible but currently you have to use Javascript to detect the viewport size and calculate how to center the container. – Hoshts Jul 03 '14 at 23:38
  • Oh sorry. I got rid of that centering code. First I need the button's to have a left margin so that they dont stick to each other, but for some reason it does not work. When I insert a margin-left using the Chrome inspector, it works. – Tarang Hirani Jul 03 '14 at 23:39
  • I don't get it... it does apply! do you want the box to show up in the middle of the page? – imbondbaby Jul 03 '14 at 23:44
  • 1
    Is there a reason why you are using the `btn-group` class? It makes buttons stick to each other by default. – Hoshts Jul 03 '14 at 23:46
  • This is what I am facing: http://jsfiddle.net/saTDx/ The margin-left is not getting triggered – Tarang Hirani Jul 03 '14 at 23:47
  • Wow. My style.css had the same class name as a class in Bootstrap. I did not mean to do that. Thank you for pointing that out! – Tarang Hirani Jul 03 '14 at 23:50
  • [here](http://jsfiddle.net/saTDx/1/) – shennan Jul 03 '14 at 23:51
  • @TarangHirani It's easy to get messed up in all classes there. – Hoshts Jul 04 '14 at 00:04

1 Answers1

1

Try this:

CSS:

body, html {
    background-image: url('http://images.alphacoders.com/234/234641.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin:0;
    padding:0;
    height: 100%;
}
.container {
    height: 100%;
    text-align: center;
    white-space: nowrap;
}
.container:before {
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    margin-right: -.25em;
    height: 100%;
}
.btn-group {
    display: inline-block;
    outline: 1px solid red;
    vertical-align: middle;
    white-space: normal;
    padding: 20px;
}

DEMO

Also, as mentioned in the comments... you might want to rename btn-group class because it is making the button's stick together.

Credits

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
  • Wow! This works, im just really confused by all this code though. What's the difference when a background-image is applied to html as opposed to the body tag? – Tarang Hirani Jul 04 '14 at 00:07
  • Check here for more info http://css-tricks.com/centering-in-the-unknown/ Also, please accept the answer if it was helpful – imbondbaby Jul 04 '14 at 00:10
  • Also there is a difference.. I tried setting it to just `html` css but it didn't work for your code... I found this helpful http://stackoverflow.com/a/7187588/3739658 – imbondbaby Jul 04 '14 at 00:15