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,如需转载请自行联系原作者

相关文章
|
前端开发
CSS 中相对定位(relative)与绝对定位(absolute)的详解
CSS 中相对定位(relative)与绝对定位(absolute)的详解
284 0
transform: translateY(-50%)实现垂直居中效果
transform: translateY(-50%)实现垂直居中效果
156 0
transform: translateY(-50%)实现垂直居中效果
|
前端开发
display:box、display:flex实现多行文本垂直居中
display:box、display:flex实现多行文本垂直居中
289 0
display:box、display:flex实现多行文本垂直居中
html+css实战159-vertical-align-01
html+css实战159-vertical-align-01
97 0
html+css实战159-vertical-align-01
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
530 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
html+css实战160-vertical-align-02
html+css实战160-vertical-align-02
111 0
Flex Circle
package com.gis { import com.esri.ags.SpatialReference; import com.
863 0
|
Web App开发 前端开发
|
Web App开发 测试技术