Question

如何制作具有垂直对齐的div：top，将其位置更改为vertical-align：middle，但是通过这些状态进行平滑的动画转换？

我无法让它工作，垂直对齐是不可转换的吗？

代码：

jquery

这里是小提琴：https://jsfiddle.net/7amp783t/

Answer 1

如果你想使用vertical-align ，你不应该在表格单元格中使用，而是并排使用2个元素，在这里你可以设置它们产生的线高的值。在这种情况下，vertical-align可以采用许多预定义值或数值。

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

因为你的例子给出了200px的高度，我们可以玩这个：https://jsfiddle.net/7amp783t/5/

＆＃13;

string path = @"C:\Users\derek.antrican\";

using (Stream input = Assembly.GetExecutingAssembly().GetManifestResourceStream("WINFORMSAPP.Resources.SUBFOLDER.FILE.txt"))
using (Stream output = File.Create(path + "FILE.txt"))
{
    input.CopyTo(output);
}

＆＃13;

.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 */
  }

＆＃13;

Answer 2

我认为你必须使用Jquery来创建一个滑动动画。您可以使用jQuery的toogle功能来执行此操作。 http://api.jquery.com/toggle/

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

Answer 3

尝试转换，而不是将其垂直对齐到中间。此代码将执行与您要完成的操作相同的操作。将您的悬停状态更改为包含 translateY（-50％）

Working Demo

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

Answer 4

使用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%)移动文字＆＃34; up＆＃34; （因此-）占其父框高度的50％。

编辑您不必担心设置父div的position: relative。为清楚起见，我将其删除了。

我也更新了your JSFiddle。

Answer 5

你可以试试这个样本：

使用transform：translateY（-50％）;方法 css vertical align animation

List<String> numberStringList = Arrays.asList(numberStrings);

让我知道你是否需要进一步的帮助

Answer 6

位置：亲戚可以很简单：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

CSS Transitions将float定义为可动画，但仅限于在两个长度值之间进行插值。

vertical-align

因此，┌────────────────┬───────────┐ │ Property Name │ Type │ ├────────────────┼───────────┤ │ vertical-align │ as length │ └────────────────┴───────────┘和bottom之间的转换不会很顺利。

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

但是，您正在Table height algorithms中定义的具有不同行为的表格单元格上使用它。特别是，长度值不适用于表格单元格。

垂直对齐属性上的CSS转换

7 个答案: