div内的垂直对齐div不起作用 - CSS

Question

JS 小提琴：http://jsfiddle.net/Rkh8L/

我正在尝试在 div 中垂直居中 div。我想垂直居中的类是 MonsterImage。

这里是完整的代码

            <div style="float: left; text-align: center; vertical-align: middle; margin:10px;">

                <asp:RadioButton  ID="RdButtonMonsterImages" ClientIDMode="Static" runat="server" />

                <div class="permonster" >
                    <div class="MonsterImage"></div>            
                </div>
        </div>



            .permonster
        {
            width: 130px;
            height: 120px;
            text-align: center;
            vertical-align: middle;
            border-top: 1px solid #f7fcff;
            background: #ababab;
            background: -webkit-gradient(linear, left top, left bottom, from(#e3e6e8), to(#ababab));
            background: -webkit-linear-gradient(top, #e3e6e8, #ababab);
            background: -moz-linear-gradient(top, #e3e6e8, #ababab);
            background: -ms-linear-gradient(top, #e3e6e8, #ababab);
            background: -o-linear-gradient(top, #e3e6e8, #ababab);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
            -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
            box-shadow: rgba(0,0,0,1) 0 1px 0;
            text-decoration: none;
            padding:2px;
        }


            .MonsterImage
            { 
border-width: 0px; border-style: none; 
background-image: url(http://static.monstermmorpg.com/images/csssprites/RegisterCSS.png); 
background-color: transparent; 
margin:auto; 
background-repeat: no-repeat; 
background-position: -0px -120px;  
width: 130px; 
height: 96px;   
            }

Answer 1

您可以在 div 中居中（垂直和水平对齐）div，如下所示

HTML

<div id="parent">
    <div id="child">
    </div>
</div>

CSS

#parent {
    background-color: #333333;

    position: relative;
    height: 300px; 
    width:300px;
}

#child {
    background-color: #cccccc;

    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

请参阅 this 文章，了解其工作原理。
注意：背景颜色仅用于说明目的。

查看下面的结果。

Answer 2

您不能垂直对齐该元素，只需在 .MonsterImage 类的顶部添加一些边距，就像 margin-top:13px; 应该这样做。

Answer 3

不想让你失望，但这仅靠 CSS 是不可能的。

您可以执行以下操作：

• 在内部 div 上使用固定的顶部和底部边距，并将外部 div 的高度保留为“自动”（您将失去对外部 div 高度的控制）
• 对所有内容进行硬编码（显然，您将失去自动调整大小）
• 加载文档后使用 javascript 即时调整大小