是否可以垂直对齐锚标签内的图像?
我在一个 DIV 中使用了两个锚标签。每个标签都应该垂直对齐到中心。在一个中,我在另一个文本中使用图像?
PS:没有行高
是否可以垂直对齐锚标签内的图像?
我在一个 DIV 中使用了两个锚标签。每个标签都应该垂直对齐到中心。在一个中,我在另一个文本中使用图像?
PS:没有行高
尝试这个:
div{
display: table-cell;
vertical-align: middle;
}
您不能在 div 标签内垂直对齐,但可以使用表格单元格。如果您可以修复图像及其容器的高度,您可以解决它。
这似乎对我有用:
/* 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;
使用 CSS 的解决方案非常简单。
这是一个例子:
#anySection {
background: white url(../images/anyImage.jpg) no-repeat center;
height: 500px;
width: 500px
}
标记:
<div id="anySection"></div>
您将获得一个 500 x 500 像素的部分,其中您的图像居中。
我有同样的问题。这对我有用:
<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>
由于没有人指出,您会根据 DOCTYPE 获得不同的行为。
(在我的例子中,过渡文档类型没有垂直对齐没有兄弟文本节点的内联元素,而 html5 可以。)
参考以下网址,它可能包含您需要的答案,并让您全面了解垂直对齐属性。
<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>
尝试这个。