垂直对齐不起作用

Question

是否可以垂直对齐锚标记内的图像？

我在 DIV 内使用两个锚标记。每个锚标记应垂直居中对齐。 在一篇文章中我在另一篇文章中使用图像？

PS：没有行高

Answer 1

垂直对齐的行为与您在 div 中的想象不同，因为它仅适用于表格单元格。

有许多CSS“黑客”可以让它工作，例如 这个 或这个

Answer 2

试试这个：

div{
    display: table-cell;
    vertical-align: middle;
}

Answer 3

您不能在 div 标签内垂直对齐，但可以在表格单元格中垂直对齐。如果您可以修复图像及其容器的高度，则可以解决此问题。

Answer 4

这似乎对我有用：

/* 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;

Answer 5

解决方案非常简单，使用 CSS。

下面是一个示例：

#anySection {
    background: white url(../images/anyImage.jpg) no-repeat center;
    height: 500px;
    width: 500px
}

标记：

<div id="anySection"></div>

您将获得一个 500 x 500 像素的部分，其中图像居中。

Answer 6

我也有同样的问题。这对我有用：

 <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>

Answer 7

请查阅以下网址，它可能会包含您需要的答案，并让您对垂直对齐属性有一个全面的了解。

http://css-tricks.com/what-is-vertical-align/< /a>

Answer 8

由于没有人指出这一点，因此根据 DOCTYPE，您会得到不同的行为。

（在我的例子中，过渡文档类型没有垂直对齐没有同级文本节点的内联元素，而 html5 则可以。）

Answer 9

<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>

Fiddle 演示

试试这个。