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。

Answer 2

margin的速记声明需要4个参数从顶部移动并绕顺时针方向移动。使用

margin: 0 auto 0 auto;

这与

相同

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

应该以绿色按钮为中心。

Answer 3

使用CSS3（流行的动画平台http://famo.us使用CSS3）

#div {
   position: absolute
   left: 50%
   top: 50%
   transform: translate(-50%, -50%)
}

translate使用孩子自己的大小调整

请记住添加前缀-webkit，-moz，-o等，并记住任何其他transform属性将覆盖现有的transform属性

使用JS查询选择/连接inline-css字符串，或者你可以使用单独的容器“shell”进行其他位置更改

Answer 4

您可能想尝试margin-left: auto和margin-right: auto，我不确定您是否需要display: inline-block作为父级div display: block。