Loading [MathJax]/jax/output/CommonHTML/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

复制
相关文章
图像垂直方向投影
算法:图像垂直方向投影是以x轴为轴投影,图像垂直方向投影(即计算目标图像在垂直方向的像素点个数,然后显示出来),进行图像投影的主要目标是要对其中的缺陷进行分割出来。投影是将场景投影到摄像机的像平面上,如透视投影、仿射投影、弱透视投影和类透视投影等。
裴来凡
2022/05/29
5090
图像垂直方向投影
css中绝对定位_绝对定位和相对定位怎么用
bottom属性描述时,以首屏页面左下角为参考点 如果浏览器不动,滚动条动的时候,红色盒子跟随页面动,红绿盒子间距不变。
全栈程序员站长
2022/11/17
2.6K0
css中绝对定位_绝对定位和相对定位怎么用
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;
韩曙亮
2023/04/16
3.2K0
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ;
韩曙亮
2023/04/16
9670
【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )
垂直方向上下居中_如何实现垂直居中
这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上
全栈程序员站长
2022/09/19
1.7K0
【短视频运营】账号定位 ( 擅长方向 | 利他性 | 变项方向 | 赛道现状 | 账号成本 | 账号领域垂直 )
擅长方向 : 账号发布的内容 , 一定是 自己擅长的方向 , 真实具备某种能力 , 职业能力 , 业余爱好 等 ;
韩曙亮
2023/03/30
4790
解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
      在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。   多年以来,垂直居中已经成为了CSS领域的圣杯,它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征:               1)它是极其常见的需求。               2)从理论上来看,它似乎极其简单。    
李文杨
2018/03/27
1.8K0
解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
css绝对定位与相对定位结合使用_css定位方法
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。—(w3cSchool)
全栈程序员站长
2022/11/16
1.1K0
绝对定位下的盒模型
元素被绝对定位,那么元素将会脱离正常流(normal flow),并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中,我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式:   BoxWidth = MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth; 但是在含有绝对定位元素的包含块内,包含块的尺寸却不能
欲休
2018/03/15
8330
【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )
此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 ,
韩曙亮
2023/04/16
1.9K0
【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )
CSS 定位布局 - 相对、绝对、固定三种定位
文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
Devops海洋的渔夫
2019/05/31
3.6K0
Python往这个方向走,绝对没有错
近几年Python的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多。一些学习Python的小白在学习初期,总希望能够得到一份Python学习路线图,小编经过多方汇总为大家汇总了一份Python学习路线图。
python学习教程
2019/09/03
5690
Python往这个方向走,绝对没有错
可视化格式模型-绝对定位
本文介绍了绝对定位与相对定位的区别,以及绝对定位的元素是如何脱离文档流布局的。同时,文章还探讨了绝对定位元素的包含块以及堆叠层次的概念。
练小习
2017/12/29
6540
CSS 定位布局 - 绝对、固定定位设置居中悬浮div
在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。
Devops海洋的渔夫
2019/05/31
3.4K0
微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
position【定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset】
达达前端
2019/07/04
1.5K0
CSS进阶08-绝对定位 Absolute Positioning
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
love丁酥酥
2018/08/27
5270
CSS进阶08-绝对定位 Absolute Positioning
绝对定位多个字居中显示的css
在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box03 .percent { position: absolute; right: 31%; top: 12%; width: 100px; font-family: arial;
蓓蕾心晴
2018/04/12
1.6K0
加工中心的运动和托盘表面的平行度和各轴运动方向相互垂直度的检测
数控编程、车铣复合、普车加工、Mastercam、行业前沿、机械视频,生产工艺、加工中心、模具、数控等前沿资讯在这里等你哦
lrglu
2023/09/28
5350
加工中心的运动和托盘表面的平行度和各轴运动方向相互垂直度的检测
Android-水平和垂直方向都可滑动的RecycleView
最近有点忙,项目进度跟的比较紧。最近需求那边让我们写一个左右和上下都可滑动的列表,用来展示多个Title的值。这里我把需求简化了一下。老规矩,先看图。 在看到需求的时候,有在网上看看有没有别人造好的轮
code_horse
2018/07/02
1.9K0
垂直方向margin重叠原因与解决方法 原
可以看出由于margin-top:20px;margin-bottom:20px,应该显示40px但是只显示20px,是什么原因呢?这就涉及到BFC
tianyawhl
2019/04/04
1.8K0
垂直方向margin重叠原因与解决方法
                                                                            原

相似问题

css。绝对定位DIV垂直中心

33

中心div,垂直和水平方向,位置绝对

20

水平和垂直中心绝对定位元件

35

自举中心垂直方向

11

定位webkit-滚动条绝对和垂直中心

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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