how to vertically center an image inside of a relatively-positioned container?

Question

I would like to vertically center the image in the below HTML, so that it is vertically-center to the div it is next to ("rtUpdateContentDiv"). Both the img and div are inside a parent container, "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>

here is the css of the image so far:

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

and of the container:

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

The parent needs to remain relative.

How can I vertically-center the image (38px x 38px)?

Thank you for any help!

Answer 1

Solution1:

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

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

Solution2:

.statusImg
{
     position: absolute;
     height:38px;
     top:50%;
     margin-top:-19px;
}

hope it will help...

Answer 2

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

Answer 3

使用top: 50%用组合的margin-top一半的图像高度的： http://jsbin.com/adiseq/1/edit