4

是否可以垂直对齐锚标签内的图像?

我在一个 DIV 中使用了两个锚标签。每个标签都应该垂直对齐到中心。在一个中,我在另一个文本中使用图像?

PS:没有行高

4

9 回答 9

11

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

有许多 CSS“hacks”可以让它工作,比如这个这个

于 2009-12-14T11:45:09.740 回答
5

尝试这个:

div{
    display: table-cell;
    vertical-align: middle;
}
于 2012-07-10T16:46:28.470 回答
3

您不能在 div 标签内垂直对齐,但可以使用表格单元格。如果您可以修复图像及其容器的高度,您可以解决它。

于 2009-12-14T11:38:31.020 回答
3

这似乎对我有用:

/* 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;
于 2013-09-23T18:05:37.170 回答
2

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

这是一个例子:

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

标记:

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

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

于 2011-11-15T23:21:09.380 回答
1

我有同样的问题。这对我有用:

 <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>
于 2013-01-26T19:52:34.720 回答
0

由于没有人指出,您会根据 DOCTYPE 获得不同的行为。

(在我的例子中,过渡文档类型没有垂直对齐没有兄弟文本节点的内联元素,而 html5 可以。)

于 2013-01-08T19:03:54.257 回答
0

参考以下网址,它可能包含您需要的答案,并让您全面了解垂直对齐属性。

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

于 2009-12-14T16:49:31.343 回答
0
<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>

小提琴演示

尝试这个。

于 2014-08-15T14:14:46.230 回答