垂直居中DIV不起作用 - CSS

Question

JS fiddle : http://jsfiddle.net/Rkh8L/

我想要在一个 div 中垂直居中另一个 div，我想要垂直居中的 class 是 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;   
            }

- Furkan Gözükara

---

添加了 JSFiddle：http://jsfiddle.net/Rkh8L/ - Furkan Gözükara

已解决问题：将 display:table-cell; 转换为 per monster - Furkan Gözükara

以下文章解释了您做错了什么，并提供了两种方法来实现您想要的。http://phrogz.net/css/vertical-align/index.html - Mike Rylander

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文章，其中解释了它的工作原理。
注意：背景颜色仅用于说明目的。

请参见下面的结果。

- Nadeeja Bomiriya

Answer 2

你不能垂直对齐该元素，只需在你的.MonsterImage类顶部添加一些边距即可，例如margin-top:13px;。

- Andres Ilich

---

实际上，MonsterImage的margin:auto应该可以垂直居中对齐，但不知何故无法正常工作。 - Furkan Gözükara

你的 .monsterimage 类的宽度和高度是否随着图像的变化而改变？ - Andres Ilich

Answer 3

很抱歉让你失望，但仅使用CSS是不可能实现的。

以下是一些可行的方法：

• 在内部div上使用固定的顶部和底部边距，并将外部div的高度设置为“auto”（你将失去对外部div高度的控制）
• 硬编码所有内容（显然会失去自动调整大小的功能）
• 在加载文档后使用JavaScript动态调整大小

- tdammers

---

实际上这是可能的 :) 解决问题：将"display:table-cell;"转换为每个元素。 - Furkan Gözükara

我也不是针对所有浏览器。你必须拥有一个良好的浏览器才能在互联网上冲浪 :) - Furkan Gözükara

如果这是真的就好了...不需要支持IE 6/7应该是默认的，但不幸的是，太多用户仍然坚持使用它们。 - tdammers

我想说的是，有时候你必须这样做。如果你不需要这样做，那就算你幸运了。 - tdammers

+1 - 纯粹是因为我不明白这里被接受的答案是正确的，而且我同意你@tdammers...对于可变高度的容器，除非我漏掉了什么，否则你需要像Javascript这样的东西来调整边距。为什么你的答案被投票下降毫无道理... - Chris Kempen