Question

我在其他div元素中垂直对齐div个元素。

我正在使用position: relative; transform: translateY(-50%); top: 50%对齐它们。这很好。

我现在想要扩展元素（使用jQuery插件'Transit'）。

当我缩放子div元素时，它们会移出垂直对齐方式（https://i.imgur.com/wWTJSSj.png第二个绿色框已应用transform: scale(1.5)。

有什么方法吗？

Answer 1

听起来你忘了第二个transform将完全覆盖原始的<{1}}。第二个转换应 transform: translateY(-50%) scale(1.5);

＆＃13;

.container {
  height: 100vh;
  padding-top: .25em;
}

.box {
  height: 2em;
  width: 3em;
  background: limegreen;
  float: left;
  margin: .5em;
  position: relative;
  transform: translateY(-50%);
  top: 50%;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: translateY(-50%) scale(1.5);
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

＆＃13;

但坦率地说，这种对齐技术并不是必需的。使用display:inline-block vertical-align:middle或仅使用flexbox和align-items:center

，可以更简单地对齐这些子项

<强>内联块

＆＃13;

.container {
  height: 100vh;
  padding-top: .25em;
}

.box {
  height: 2em;
  width: 3em;
  display: inline-block;
  vertical-align: middle;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

＆＃13;

<强> Flexbox的

＆＃13;

.container {
  height: 100vh;
  padding-top: .25em;
  display: flex;
  align-items: center;
}

.box {
  height: 2em;
  width: 3em;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box tall"></div>
  <div class="box"></div>
  <div class="box"></div>

</div>

＆＃13;

变换：缩放垂直对齐的元素

1 个答案: