Question

我有一个容器，我想集中，但它似乎没有工作。我已经将右边和左边的边距设置为自动，但是它被卡在右侧并且令人沮丧。

.music .pane {
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    display: inline-block;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

Answer 1

您可以完全删除h1以使div居中

inline-block

<强> JSFiddle Demo

Answer 2

您只需要对CSS进行一些更改：

.music.pane {
    background-color: blue;
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

这使div水平居中。

Answer 3

您需要将div保留为块元素。

.music .pane {
    margin-top: 15%;
    margin-right: auto;
    margin-left: auto;
    max-width: 70%;
    display: block;
    font-size: 110%;
    background: rgba(240,240,253,0.90);
    padding: 22px 32px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
}

JS FIDDLE

居中div元素

3 个答案: