position:absolute實現垂直居中

一些圖標通常要垂直居中

如下所示：

而css中沒有直接的樣式。需要我們自己調試。

我用了position:absolute;來實現。

要想使得position:absolute;有效，它的父元素必須也是position:absolute;否則就會以body作為參照物。

<span style="position:absolute;">
                      <!--{if $aListData[data].istop}-->
                      <img src="/images/common/top_icon.png" height="22px;" class="center-vertical-1">
                      </span>
                      <!--{/if}-->
                      <!--{$aListData[data].Title}-->
                      <!--{if $aListData[data].new}-->
                      <span style="position:absolute;">
                      <img src="/images/new.png" height="22px;" class="center-vertical-2">
                      </span>
                      <!--{/if}-->

於是我就加了span這種空元素作為其參照物。

css如下：

/*垂直居中*/
.center-vertical-1{
    position:absolute;
    top:50%;
    left:-27px;
    height:22px;
}

.center-vertical-2{
    position:absolute;
    top:50%;
    left:8px;
    height:22px;
}

這樣就實現了垂直居中了。稍微調整一下就可以了。left，top之類的。