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之类的。