1

下の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) を垂直方向に中央揃えするにはどうすればよいですか?

助けてくれてありがとう!

4

3 に答える 3

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;
}

それが役立つことを願っています...

于 2012-09-13T23:41:13.880 に答える
1

このhttp://css-tricks.com/centering-in-the-unknown/を読むことをお勧めします。最後の方法が必要な場合があります。

于 2012-09-14T00:01:32.010 に答える
0

画像の高さの半分top: 50%と組み合わせて使用​​: http://jsbin.com/adiseq/1/editmargin-top

于 2012-09-13T23:41:37.963 に答える