div 内的垂直对齐 div 不起作用 - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7379010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align div inside div is not working - CSS
提问by MonsterMMORPG
JS fiddle : http://jsfiddle.net/Rkh8L/
JS小提琴：http: //jsfiddle.net/Rkh8L/
I am trying to vertically middle div inside div. The class i want to be vertically middles is MonsterImage.
我试图在 div 中垂直居中 div。我想成为垂直中间的班级是 MonsterImage。
Here the whole code
这里是整个代码
<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;
}
采纳答案by Andres Ilich
You can't vertical-align that element, just add some margin to the top of your .MonsterImage class, something like margin-top:13px;should do it.
您不能垂直对齐该元素，只需在 .MonsterImage 类的顶部添加一些边距，就像margin-top:13px;应该这样做。
回答by Nadeeja Bomiriya
You can center (vertical and horizontal align) a div inside a div as below
您可以将 div 内的 div 居中（垂直和水平对齐），如下所示
HTML
HTML
<div id="parent">
<div id="child">
</div>
</div>
CSS
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%;
}
See thisarticle which explains how it works.
Note: Background color is only for illustration purposes only.
请参阅这篇文章，它解释了它是如何工作的。
注意：背景颜色仅用于说明目的。
See the result below.
看看下面的结果。
回答by tdammers
Hate to disappoint you, but this is just not possible with CSS alone.
不想让您失望，但这仅靠 CSS 是不可能的。
Here's some things you can do:
您可以执行以下操作：
- use fixed top and bottom margins on the inner div, and leave the outer div's height at 'auto' (you'll lose control over the outer div's height)
- hard-code everything (you'll lose automatic resizing, obviously)
- use javascript to adjust the sizes on-the-fly after loading the document
- 在内部 div 上使用固定的顶部和底部边距，并将外部 div 的高度保留为“自动”（您将无法控制外部 div 的高度）
- 硬编码所有内容（显然，您将失去自动调整大小）
- 加载文档后，使用 javascript 即时调整大小
