Question

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

我在DIV中使用两个锚标签..每个标签应垂直对齐到中心。在一个我在另一个文本中使用图像？

PS：没有行高

Answer 1

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

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

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/

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 demo

试试这个。

垂直对齐不起作用

9 个答案: