Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >中心绝对定位垂直方向?

中心绝对定位垂直方向?
EN

Stack Overflow用户
提问于 2014-09-18 01:16:24
回答 1查看 84关注 0票数 2

我有这个:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="ce_text forward block"><div class="fill_bottom"></div>

  
      <p><a href="" target="_blank"><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></a></p>  
  
  
</div>

它在chrome中工作,但在firefox中不行,有人能帮我处理css吗?

小提琴

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-18 02:48:00

火狐的问题似乎是由margin: auto的使用引起的。我已经完全重建了你的榜样来消除这个问题。

新的和改进的

  • 无固定高度。高度由百分比(可以修改)和最小高度控制.
  • 没有额外的标记。该三角形由一个伪元素创建并旋转。文本以其<a>包装器为中心。
  • 中心三角形。三角形以任意高度为中心,bottom: 50%和负的底部边缘为其高度的一半。
  • 无间隙-三角形足够大,以消除任何角落的间隔。如果您需要它更大,它可以是必要的大;只要保持高度与宽度比1:1,并增加负底部边缘的大小。 *{边距: 0;} html,身体{高度: 100%;} h1 {背景:#333;高度: 40%;最小-高度:140 50;位置:相对;溢出:隐藏;z-索引: 0;} h1 a{显示:块;高度: 100%;位置:绝对;顶部: 50%;边缘-顶部:-0.56em;左:100 50;}H1:在{内容:‘’之前:显示:块;位置:绝对;底部: 50%;边缘-底部:-1000 50;左:-2000 50;高度:2000 50;宽度:2000 50;背景:#F00;变换:旋转(45 left );转换:左0.3s;z-索引:-1;}H1:悬停:{左侧:0};

旧溶液

存档的-固定高度选项(不转换,应该返回到IE8)

我对此有不同的看法:

  • 直角三角形和条形由伪元素组成,并以百分比定位。
  • z-index: -1将伪元素保留在文本后面。
  • 当三角形被推到外部时,overflow: hidden会阻止滚动条。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* {
	margin: 0;
	padding: 0;
}

.headline {
	height: 100px;
	background: #333;
	color: #FFF;
	position: relative;	
	z-index: 2;
	display: inline-block;
	width: 100%;
	height: 0;
	padding: 30px 0 70px 50px;
        overflow: hidden;
}
.headline:before {
	width: 30%;
	content:'';
	display: block;
	height: 100px;
	background: #F00;
	position: absolute;
	top:0;
	left: 0;
	transition: all 0.3s linear 0s;
	z-index: -1;
}
.headline:after {
	content: '';
	display: block;
	border-bottom: solid 50px transparent;
	border-top: solid 50px transparent;
	border-left: solid 50px #F00;
	height: 0;
	width: 0;
	left: 30%;
	position: absolute;
	top:0;	
	transition: all 0.3s linear 0s;
	z-index: -1;
}
.headline:hover:before {
	width: 100%;
}
.headline:hover:after {
	left: 100%;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<h1 class="headline">Text</h1>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25908716

复制
相关文章
Gorm Update 返回的影响条数不正确问题
Gorm 连接 mysql 使用的是 github.com/go-sql-driver/mysql 驱动, 但是这个驱动中 clientFoundRows 默认是 false, 也就是说返回的影响条数是实际的影响条数, 而不是匹配的条数, 也就是说如果要修改的数据和表中数据一样, 就不会返回影响条数, 这和 mysql 官方不一致
北漂的我
2021/11/25
2.5K0
Winform 中 DesignMode 返回值不正确的问题。
本文转载:http://blog.csdn.net/sabty/article/details/5325260
跟着阿笨一起玩NET
2018/09/18
1.6K0
SpringBoot 项目 返回时间 日期、格式不正确 解决办法
  今天做一个 SpringBoot+Vue 的一个练习项目,想要搞一个创建该账号的时间,记录下来,然后展示在网页中,但是遇到了很多的问题,先介绍以下,我们之前怎么做的。
RAIN7
2022/10/08
2.3K0
SpringBoot 项目 返回时间 日期、格式不正确 解决办法
位图算法
很多不重复的整数,其中最大值不超过40亿,最小值是0,要求判断某个指定的整数,是否在这个集合中。
半生瓜的blog
2023/05/12
3430
EasyCVR调用获取通道信息接口,返回通道数量不正确如何解决?
EasyCVR视频融合云服务平台的设备接入方式十分广泛,可支持主流标准协议如国标GB28181、RTSP/Onvif、RTMP等,还能支持厂家的私有协议与SDK接入,比如海康Ehome、海康SDK、大华SDK等(更多SDK与私有协议也在持续拓展中)。为了便于用户集成、调用与二次开发,平台也提供了丰富的API接口供用户使用。具体接口使用教程,大家可参照官方文档。
TSINGSEE青犀视频
2022/05/17
6590
bitmap位图索引技术占用的存储空间_bitmap位图
参考 https://www.cnblogs.com/lbser/p/3322630.html https://blog.csdn.net/catoop/article/details/111689777
全栈程序员站长
2022/11/17
1.1K0
【C++】位图
所谓位图,就是用每一位来存放某种状态,适用于海量数据,数据无重复的场景。通常是用
青衫哥
2023/04/24
3580
【C++】位图
redis位图-bitmap
见名知义,位映射,其实就是string类型的bit数组,并不是redis的基本数据类型,而是在string的基础上做的扩展,支持对位进行操作。
cuiyi
2023/01/04
1.3K0
UGL之透明位图
为了更好的视觉效果,WindML还提供了一种透明位图(Transparent Bitmap)。
Taishan3721
2020/10/19
7050
UGL之透明位图
【C++】位图
给40亿个不重复的无符号整数,没排过序。给一个无符号整数,如何快速判断一个数是否在这40亿个数中❓
平凡的人1
2023/10/15
1530
【C++】位图
C++位图
其次是set和哈希表。set自动可以排序且在红黑树中查找速度也很快。但要把40亿个整数加上红黑树的节点(三叉链外加颜色)放进内存里,内存明显不够,不可取;哈希表同样是把40亿个整数外加节点放进内存里,内存明显不够,也不可取。
梨_萍
2023/04/24
4620
C++位图
C++ 哈希的应用【位图】
位图(bitset)是一种特殊的数据结构,仅仅依靠 0、1 表示当前位置是否有数据存在,常用于对查找速度和存储空间有着高要求的场景中,除此之外,位图还可以配合宏定义,实现同时传递多个参数,比如系统调用 open,其中的参数2(打开方式)就是一个简单的位图结构
北 海
2023/07/28
2960
C++ 哈希的应用【位图】
Google广告显示不正确的问题
互联网从业人员相比对于Google Adsense应该非常熟悉,它就像我们生活中常见的楼宇电梯电视广告一样,是互联网上的一种广告类型。每个网站通过安装一块电视,定期的向用户播放广告。只不过Google的这块电视,能够根据网站的内容、用户的访问行为等一系列大数据为每个用户投放最感兴趣的内容。
大江小浪
2020/03/30
3.1K0
位图字体的制作与使用
由于有开发者反馈位图字体不会用,上周对位图字体的官网文档进行了更新,把细节介绍的更清晰了。今天,又遇到有没看文档的开发者来提问位图字体的使用问题,因此将官网文档同步到公众号,让更多人知道,也希望大家遇到问题,先翻一下官网文档和社区,再进行提问。
Layabox Charley
2020/11/30
3.6K0
位图字体的制作与使用
Redis 中的 BitMaps(位图)命令详解
Redis提供的Bitmaps这个“数据结构”可以实现对位的操作。它本身不是一种数据结构,实际上就是string(字符串)数据类型,但是它可以对字符串的位进行操作。可以把 Bitmaps想象成一个以位为单位的数组,数组中的每个单元只能存0或者1,数组的下标在bitmaps中叫做偏移量。单个 bitmaps 的最大长度是512MB,即2^32个比特位。 现代计算机用二进制位作为信息的基础单位,1个字节等位8位,例如 big 字符串是由3个字节组成,但实际在计算机存储时将其用二进制表示,big 分别对应的ASCII码分别是98、105、103,对应的二进制分别是01100010、01101001和01100111,如下图:
共饮一杯无
2022/12/25
1K0
Redis 中的 BitMaps(位图)命令详解
Flash 矢量图和位图性能对比 导出为位图/缓存为位图 export as bitmap / cache as bitmap
 大家都知道Flash处理矢量图比位图要慢,而具体的性能上对比也有不少的前人已经做过。
用户1258909
2018/07/24
9660
UGL之单色位图
除了标准位图,WindML还提供一种单色位图(Monochrome Bitmap)。这种位图的图案仅包含一种颜色,而且由GC的前景色来指定。
Taishan3721
2020/10/19
6980
UGL之单色位图
占位图怎么写[通俗易懂]
想必大家对占位图都不会陌生吧,非常犀利的一个工具,当然也有非常多优秀的网站为我们提供这样的接口。 唯一遗憾的是国内的站点非常少。
全栈程序员站长
2022/09/20
2.9K0
位图索引(bitmap index)
位图索引是一种很高效的索引结构,对于多属性过滤的聚合查询很高效,玩的就是 bit。
Apache IoTDB
2020/09/27
2.5K0
位图索引(bitmap index)
点击加载更多

相似问题

Android - ThumbnailUtils.getThumbnail返回错误图片

09

MediaStore.Images.Thumbnails.getThumbnail返回null

1101

MediaStore.Video.Thumbnails.getThumbnail()返回null

10

BitmapFactory.decodeResource在Android2.2中返回可变位图,在Android1.6中返回不可变位图

74

FileMaker 13 GetThumbnail异常?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文