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)的详解
248 0
|
前端开发 容器
你真的了解position吗?
你真的了解position吗?
transform: translateY(-50%)实现垂直居中效果
transform: translateY(-50%)实现垂直居中效果
146 0
transform: translateY(-50%)实现垂直居中效果
|
前端开发
display:box、display:flex实现多行文本垂直居中
display:box、display:flex实现多行文本垂直居中
272 0
display:box、display:flex实现多行文本垂直居中
|
Web App开发 前端开发
|
Web App开发 前端开发 容器
布局 position
position : 设置定位方式 跟『定位』相关的有一些属性,最重要的一个是『position』,它主要是设置『定位方式』。 而定位方式最重要的是设置『参照物』. 配合 position 使用的有这些属性:  属性名 值 描述 top   元素上边缘距离参照物边缘的距离 right   元素右边缘距离参照物边缘的距离 bottom   元素下边缘距离参照物边缘的距离 left   元素左边缘距离参照物边缘的距离 z-index           position static 静态的,是元素默认的,比如block是换行,inline是同行。
1011 0
|
前端开发 API
CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
1376 0