DEMO

Question

我正在使用Bootstrap创建一个带有div的首页，该div在页面内水平和垂直居中。但是，我正面临一些造型问题。使用类时，margin-left似乎不适用。

这是HTML5标记：

<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>

这里是CSS标记：

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;
}

另外，水平和垂直居中div的最佳做法是什么？

Answer 1

试试这个：

<强> 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

此外，正如评论中所提到的......您可能希望重命名btn-group课程，因为它会使按钮粘在一起。

Credits

当应用类时，css margin-left不起作用

1 个答案:

DEMO