问中心绝对定位垂直方向？
EN

Stack Overflow用户

提问于 2014-09-18 01:16:24

回答 1查看 84关注 0票数 2

我有这个：

.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;
}

<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吗？

小提琴

css

回答 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会阻止滚动条。

* {
	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%;
}