position:absolute实现垂直居中⼀些图标通常要垂直居中
如下所⽰:
⽽css中没有直接的样式。需要我们⾃⼰调试。
我⽤了position:absolute;来实现。
css实现垂直水平居中要想使得position:absolute;有效,它的⽗元素必须也是position:absolute;否则就会以body作为参照物。
<span >
<!--{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 >
<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之类的。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论