CSS 垂直对齐不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1900391/
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 not working
提问by Joemon
is it possible to vertically align an image coming inside an anchor tag ?
是否可以垂直对齐锚标签内的图像？
I am using two anchor tags inside a DIV.. each one should vertically align to center. in one I am using an image in another one text ?
我在 DIV 中使用了两个锚标签。每个标签都应该垂直对齐到中心。在一个我在另一个文本中使用图像？
PS: without line-height
PS：没有行高
回答by marcgg
回答by Jason Ellis
Try this:
尝试这个：
div{
display: table-cell;
vertical-align: middle;
}
回答by Rimian
You can't vertical align inside a div tag but you can with a table cell. You could work around it if you can fix the height of your image and its container.
您不能在 div 标签内垂直对齐，但可以使用表格单元格。如果您可以修复图像及其容器的高度，则可以解决它。
回答by Mahendra Liya
This seems to work for me:
这似乎对我有用：
/* 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 rafa ble
The solution is very simple using CSS.
使用 CSS 的解决方案非常简单。
Here's an example:
下面是一个例子：
#anySection {
background: white url(../images/anyImage.jpg) no-repeat center;
height: 500px;
width: 500px
}
Markup:
标记：
<div id="anySection"></div>
You'll get a 500 x 500 px section with your image centered inside.
你会得到一个 500 x 500 像素的部分，你的图像在里面居中。
回答by algreat
I had the same problem. This works for me:
我有同样的问题。这对我有用：
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
回答by Brandon Hill
Since nobody's pointed it out, you get different behaviours depending on the DOCTYPE.
由于没有人指出这一点，根据 DOCTYPE，您会得到不同的行为。
(In my case, the transitional doctype wasn't vertically aligning inline elements without sibling text nodes, whereas html5 does.)
（在我的例子中，过渡文档类型不是在没有兄弟文本节点的情况下垂直对齐内联元素，而 html5 确实如此。）
回答by Adam C
Consult the following url, it may hold the answers you need as well as give you a comprehensive understanding of the vertical align property.
请参考以下网址，它可能包含您需要的答案，并让您全面了解垂直对齐属性。
回答by Mahesh Cheliya
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh // Div Body part
</div>
</div>
Try this.
尝试这个。
