Question

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

请参阅下面的结果。

enter image description here

Answer 2

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

Answer 3

讨厌让你失望，但仅凭CSS就无法做到这一点。

以下是您可以做的一些事情：

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

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

3 个答案: