html - css html 在父 div 中居中 div

Question

为什么绿色按钮不会在红色父 div 中居中？

CSS

.button_green {
    background-image: url('../Images/btn_bg.jpg');
    width: 202px;
    height: 30px;
    text-align: center;
    text-transform: capitalize;
    color: white;
    text-shadow: 2px 2px #000;
    font-family: Arial;
    vertical-align: text-bottom;
    display: inline-block;
    margin: 0 auto;
   }

#col2_rightbuttons span { 
    display:inline-block;
    vertical-align:middle;
    margin:5 auto 0 auto;
}

HTML:

<div id="col2_rightbuttons" style="background-color:red;">
   <div class="button_green">
        <span>test2</span>
    </div>
</div>

Answer 1

尝试使用 display: block 而不是 inline-block。另外，不需要在 div 中使用 span - 只需将两者结合起来并使用一个元素，最好是语义上更正确的 button。