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



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3512415.html,如需转载请自行联系原作者

相关文章
|
8月前
|
前端开发
CSS 中相对定位(relative)与绝对定位(absolute)的详解
CSS 中相对定位(relative)与绝对定位(absolute)的详解
109 0
|
前端开发 容器
你真的了解position吗?
你真的了解position吗?
|
前端开发
display:box、display:flex实现多行文本垂直居中
display:box、display:flex实现多行文本垂直居中
202 0
display:box、display:flex实现多行文本垂直居中
|
前端开发 开发者
Margin 居中 | 学习笔记
快速学习 Margin 居中。
947 0
|
前端开发
css position relative and absolute布局
css position relative and absolute布局
106 0
css position relative and absolute布局
|
前端开发
CSS里position relative 和 absolute 的区别
CSS里position relative 和 absolute 的区别
120 0
CSS里position relative 和 absolute 的区别
|
Web App开发 前端开发