Html 为什么vertical-align: middle 不适用于我的span 或div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16629561/
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
Why is vertical-align: middle not working on my span or div?
提问by Brad
I'm trying to vertically center a spanor divelement within another divelement. However when I put vertical-align: middle, nothing happens. I've tried changing the displayproperties of both elements, and nothing seems to work.
我试图在另一个元素中垂直居中一个span或元素。但是，当我放置时，没有任何反应。我试过更改这两个元素的属性，但似乎没有任何效果。divdivvertical-align: middledisplay
This is what I'm currently doing in my webpage:
这是我目前在我的网页中所做的：
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>Here is a jsfiddle of the implementation showing that it doesn't work: http://jsfiddle.net/gZXWC/
这是实现的 jsfiddle，表明它不起作用：http: //jsfiddle.net/gZXWC/
采纳答案by Charles Addis
This seems to be the best way - some time has passed since my original post and this is what should be done now: http://jsfiddle.net/m3ykdyds/200
这似乎是最好的方法 - 自我的原始帖子以来已经过去了一段时间，这就是现在应该做的：http: //jsfiddle.net/m3ykdyds/200
/* CSS file */
.main {
display: table;
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
/* HTML File */
<div class="main">
<div class="inner"> This </div>
</div>
回答by Mahendra Liya
Try this, works for me very well:
试试这个，对我很有效：
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
回答by user1782556
Using CSS3:
使用 CSS3：
<div class="outer">
<div class="inner"/>
</div>
Css:
css：
.outer {
display : flex;
align-items : center;
justify-content: center;
}
Note: This might not work in old IE's
注意：这可能不适用于旧的 IE
回答by Kevin Lynch
Setting the line-height to the same height as it's containing div will also work
将 line-height 设置为与它包含的 div 相同的高度也可以
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
演示http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
回答by kornieff
In case you cannot rely on flexbox... Place .childinto .parent's center. Works when pixel sizes are unknown (in other words, always) and no problems with IE9+ too.
如果您不能依赖 flexbox... 放置.child到.parent的中心。当像素大小未知（换句话说，总是）并且 IE9+ 也没有问题时工作。
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">—</div>
</div>回答by Tim Perkins
You should put vertical-align: middleon the inner element, notthe outer element. Set the line-heightproperty on the outer element to match the heightof the outer element. Then set display: inline-blockand line-height: normalon the inner element. By doing this, the text on the inner element will wrap with a normal line-height. Works in Chrome, Firefox, Safari, and IE 8+
你应该穿上vertical-align: middle内部元素，而不是外部元素。设置line-height外部元素的属性以匹配height外部元素的 。然后在内部元素上设置display: inline-blockand line-height: normal。通过这样做，内部元素上的文本将以正常的行高换行。适用于 Chrome、Firefox、Safari 和 IE 8+
.main {
height: 72px;
line-height:72px;
border: 1px solid black;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div class="main">
<div class="inner">Vertically centered text</div>
</div>回答by Ruth Young
I used this to align everything in the center of the wrapper div in case it helps anyone - I found it simplest:
我用它来对齐包装器 div 中心的所有内容，以防它对任何人有帮助 - 我发现它最简单：
div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}<div class="wrapper">
<div class="inner">
</div>
</div>回答by Timbergus
Here you have an example of two ways of doing a vertical alignment. I use them and they work pretty well. One is using absolute positioning and the other using flexbox.
这里有一个例子，展示了两种垂直对齐方式。我使用它们，它们工作得很好。一种是使用绝对定位，另一种是使用flexbox。
Using flexbox, you can align an element by itself inside another element with display: flex;using align-self. If you need to align it also horizontally, you can use align-itemsand justify-contentin the container.
使用Flexbox的，你可以通过自己的另一个元素中与之对齐的元素display: flex;使用align-self。如果您还需要水平对齐它，您可以在容器中使用align-items和justify-content。
If you don't want to use flexbox, you can use the position property. If you make the container relative and the content absolute, the content will be able to move freely inside the container. So if you use top: 0;and left: 0;in the content, it will be positioned at the top left corner of the container.
如果不想使用 flexbox，可以使用 position 属性。如果您使容器相对而内容绝对，则内容将能够在容器内自由移动。所以如果你在内容中使用top: 0;and left: 0;，它会被定位在容器的左上角。
Then, to align it, you just need to change the top and left references to 50%. This will position the content at the container center from the top left corner of the content.
然后，要对齐它，您只需要将顶部和左侧的引用更改为 50%。这会将内容从内容的左上角定位在容器中心。
So you need to correct this translating the content half its size to the left and top.
因此，您需要更正这一点，将其一半大小的内容平移到左侧和顶部。
回答by Brijesh Patel
HTML
HTML
<div id="myparent">
<div id="mychild">Test Content here</div>
</div>
CSS
CSS
#myparent {
display: table;
}
#mychild {
display: table-cell;
vertical-align: middle;
}
We set the parent div to display as a table and the child div to display as a table-cell. We can then use vertical-align on the child div and set its value to middle. Anything inside this child div will be vertically centered.
我们将父 div 设置为显示为表格，将子 div 设置为显示为表格单元格。然后我们可以在子 div 上使用 vertical-align 并将其值设置为 middle。此子 div 中的任何内容都将垂直居中。
回答by Dory Zidon
here is a great article of how to vetical align.. I like the float way.
这是一篇关于如何垂直对齐的好文章..我喜欢浮动方式。
http://www.vanseodesign.com/css/vertical-centering/
http://www.vanseodesign.com/css/vertical-centering/
The HTML:
HTML：
<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>
And the corresponding style:
以及相应的样式：
#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}
