html - 如何在一个div中居中一个div？ ( margin : 0 auto; not working)

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