如何将图像垂直居中于相对定位的容器内?

时间:2012-09-13 23:35:32

标签: html css positioning centering

我想在下面的HTML中垂直居中图像,使其垂直居中于它旁边的div(“rtUpdateContentDiv”)。 img和div都在父容器中,“rtUpdateContainerDivActive”。

<div class="rtUpdateContainerDivActive">
     <img class="statusImg" src="images/icons/Knob-Valid-Green.png">
     <div class="rtUpdateContentDiv">
          <span class="rtBlueHighlight">date and time:</span>
          ipsum lorem text here
    </div>
</div>

这是迄今为止图像的CSS:

.statusImg
{
     position: absolute;
     margin-top: auto;
     margin-bottom: auto;
     vertical-align: middle;
     padding-left: 3px;
     padding-top: 3px;
}

和容器:

.rtUpdateContainerDivActive
 {
     background-color: #90ee90;
     margin-top: 1%;
     position: relative;
     min-height: 38px;
 }

父母需要保持亲戚。

如何将图像垂直居中(38px x 38px)?

感谢您的帮助!

3 个答案:

答案 0 :(得分:3)

解决方法1:

.parent{
    display: inline-table;
    height:100%;
}

.middleChild{
    display: table-cell;
    vertical-align: middle;
}

溶液2:

.statusImg
{
     position: absolute;
     height:38px;
     top:50%;
     margin-top:-19px;
}
希望它会有所帮助...

答案 1 :(得分:1)

您可能希望阅读此http://css-tricks.com/centering-in-the-unknown/,最后一种方法可能是您需要的方法。

答案 2 :(得分:0)

使用top: 50%结合图片高度的一半margin-tophttp://jsbin.com/adiseq/1/edit