CSS垂直对齐属性的过渡效果

Question

如何使一个带有vertical align:top的div，改变其位置为vertical-align:middle，并通过这些状态进行平滑动画过渡？

我无法使其工作，vertical-align是否不可过渡？

代码：

.outer{
  width:200px;
  height:200px;
  background:red;
  display:table;
  text-align:center;
}

.inner{
  width:100px;
  height:100px;
  vertical-align:bottom;
  display:table-cell;
  transition:all 2s;
}

.inner:hover{
  vertical-align:middle;
}

这是示例代码: https://jsfiddle.net/7amp783t/

- sigmaxf

Answer 1

如果您想使用垂直对齐，应该不要在表格单元格中使用，而是使用两个并排的元素，在这里您可以设置围绕它们产生的行高的值。在这种情况下，垂直对齐可以采用许多预定义的值或数值。

https://www.w3.org/wiki/CSS/Properties/vertical-align#Values

因为你的示例给出了一个高度为200像素，我们可以在此基础上进行调整：https://jsfiddle.net/7amp783t/5/。

.outer{
  font-size:18px;/* whatever */
  width:200px;
  height:200px;
  background:red;
  text-align:center;
}
.outer:before {
  content:'';
  display:inline-block;
  height:100%;/* here the line is 100% height of container: set to 200px */
  vertical-align:calc(-200px + 1em); /*chrome instead bottom */
}
.inner{
  vertical-align:0;/* from bottom : calc(-200px + 2em) go all the way down minus room for text */;
  display:inline-block;
  transition:all 2s;
}

.outer:hover .inner{/* outer, else you need to follow inner */
  vertical-align:calc(-100px + 1em);/* lets go half way */
  }

<div class="outer">
  <div class="inner">
    Hover me box 
  </div>

</div>

- G-Cyrillus

---

这个解决方案对于如此简单的问题来说过于冗长和复杂。而且你不必要地使用了任意的“魔法”数字，依赖于精确的像素值。采用响应式的方法，在 CSS 的其他地方维护/覆盖将会很繁琐。请参考我上面的例子。 - Geoff James

@GeoffJames 这是为了帮助 OP 理解 vertical-align 的工作原理，以及 OP 最初的想法可能并不如他所想的那样相关。从 OP 的 200px 示例中可以看出，它可能有效...这个想法起初并不坏，但需要再三思考（从我的屏幕上来看，你的答案是第三个下面的 ;) ) - G-Cyrillus

虽然我不反对它可以起作用，但我认为它可能超出了帖子所期望的结果的范围。这只是我的观点；而你的帖子肯定是有启发性的。 - Geoff James

关键字在问题标题中，显然存在误解。答案不一定总是解决方案，也可以说明为什么或如何工作；相对+ top:50% 也可以工作，甚至IE6也能理解...了解事物的工作原理很重要..它给我们选择提供了理由。 - G-Cyrillus

Answer 2

不要更改vertical-align属性，而是使用transform: translateY()来上下移动。

我已经试过了，并成功运行了以下代码：

.outer{
  width:200px;
  height:200px;
  background:red;
  display:table;
  text-align:center;
}

.inner{
  width:100px;
  height:100px;
  display:table-cell;
  vertical-align: bottom;
  transition: all 2s ease-in-out;
}

.inner:hover{
  transform: translateY(-50%);
}

translateY(-50%)将文本向上移动（因此使用了-），移动距离为其父元素框的高度的50%。 编辑：您不需要担心设置父div的position: relative。我已经删除了它以便更清晰。

我也更新了您的JSFiddle。

- Geoff James

---

你可以删除内部的大小设置，因为它是一个单元格，无论如何高度都是200像素 ;) 每个人都这样做 :) - G-Cyrillus

当然可以；我只是从原始的JSFiddle代码中复制粘贴而已，没有想到要删除它。 - Geoff James

谢谢，我一直在苦恼，因为网站是响应式的，需要使用百分比而不是固定数额。 - akaBase

Answer 3

CSS过渡将vertical-align定义为可动画化的属性，但仅在两个长度值之间插值时才能实现。

┌────────────────┬───────────┐
│ Property Name  │ Type      │
├────────────────┼───────────┤
│ vertical-align │ as length │
└────────────────┴───────────┘

因此，bottom和middle之间的过渡不会很平滑。

如果您使用vertical-align来相对于其行框对齐内联级元素，则可以尝试使用长度值。

但是，您正在将其用于表单元格，该元素具有不同的行为，如表高算法中所定义。特别是，长度值不适用于表单元格。

- Oriol

Answer 4

我认为你需要使用Jquery来创建一个滑动动画。你可以使用jQuery的toggle函数来实现。 http://api.jquery.com/toggle/

http://api.jquery.com/slidetoggle/

- user5637048

---

不，你不必使用jQuery来创建滑动动画。 - user663031

Answer 5

position:relative 可以是一种简单的方式：

.outer {
  width: 200px;
  height: 200px;
  background: red;
  display: table;
  text-align: center;
}
.inner {
  position: relative;
  top: 0;
  display: table-cell;
  transition: all 2s;
}
.inner:hover {
  top: 50%;
}

<div class="outer">
  <div class="inner">
    Hover me
  </div>
</div>

- G-Cyrillus

Answer 6

尝试使用transform而不是将其垂直对齐到中间。这段代码将完成您想要实现的相同效果。将您的悬停状态更改为包括translateY(-50%)

工作演示

.outer{
  width:200px;
  height:200px;
  background:red;
  display:table;
  text-align:center;
}

.inner{
  width:100px;
  height:100px;
  vertical-align:bottom;
  display:table-cell;
   transition:all 2s;
}

.inner:hover{
   transform: translateY(-50%);
}

- Nakib

Answer 7

你可以尝试这个示例：

使用 transform: translateY(-50%); 方法 css 垂直对齐动画

 .block {
 background: orange;
 height: 500px;


}
 .centered {
     text-align: center;
     background: pink;
     position: relative;
     top: 0;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
 }
 .block:hover .centered {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     top: 50%;
 }

如果需要进一步帮助，请告诉我。

- Salvador Corado