一些图标通常要垂直居中
如下所示:
而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之类的。
本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3512415.html,如需转载请自行联系原作者