如何在div中居中div？ （保证金：0自动;不工作）

Question

我有一个div将用作按钮，但它不想在较大的div中居中！

这是我更大的div的CSS：

.news-quarters{
    width:189px;
    height:300px;
    position:relative;
    float:left;
    padding:10px;
    padding-top:0px;
    margin:10px;
    text-align:left;

}

和按钮div：

.green-button{
    width:auto;
    height:auto;
    position: relative;
    float:none;
    padding:0px;
    margin: 0 auto;
    background: #0A9C00;
    background-size:auto;
    border:1px outset #0A9C00;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    overflow:auto;
    display:inline-block;

}

.green-button h4{
    text-align:center;
    color:white;
    line-height:1;
    margin:0px;
    font-size:12px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;    
    width:auto;
}

我的html是这样的：

<div class="news-quarters">
     <div class="green-button">
         <h4>Insert button text here</h4>
     </div>
</div>

有人可以帮忙吗？这严重地打扰了我:(

谢谢！

Answer 1

在样式.news-quarters中将text-align：left更改为text-align：center;

此问题已有许多现有答案，请参阅How to horizontally center a <div> in another <div>?