Question

我有一个页面，该页面的标签直接位于文本框上方，并且所有页面都垂直居中。验证输入后，我想缩小元素并将其滑动到页面顶部，同时“旋转”它们彼此相邻，左侧标签和右侧文本框。所以从本质上讲，我想从屏幕中间的那个位置开始：

                Label
               Textbox

将其显示在屏幕顶部，然后恢复为常规尺寸：

           Label: Textbox

我似乎无法找出最好的处理方式。

这里要明确，我想对此进行动画处理。在流体运动中从顶部示例转到底部示例。

以下是我刚开始学习的内容：http://jsfiddle.net/xpvt214o/280404/

以下是我想结尾的小提琴：http://jsfiddle.net/xpvt214o/280396/

从小提琴1到小提琴2的运动需要进行动画处理。这就是我正在努力的事情。

Answer 1

初始响应

您可以使用vertical-align: middle和text-align: center在内容上垂直和水平居中。在示例中：.parent1
要使两个div在同一水平线上彼此相邻，请使用display: inline-block。在示例中：.parent2

.parent1, .parent2 {
  vertical-align: middle;
  text-align: center;
}

.parent1 {
  font-size: 30px;
}
.parent2 {
  font-size: 20px;
}

.parent2 > div {
  display: inline-block;
}

.parent2 > div:nth-child(2):before {
  content: ': ';
}

<div class="parent1">
  <div>Label</div>
  <div>Textbox</div>
</div>

<br /><hr />

<div class="parent2">
  <div>Label</div>
  <div>Textbox</div>
</div>

带有动画

奖金（如果希望为其设置动画）：

您将需要transition来设置动画类型和持续时间。然后准备两个CSS类：

名为.parent的默认项将该项定位在屏幕中央

.parent {
  position: absolute;
  left: 25%;
  top: calc(50% - 47px);
  width: 50%;
  vertical-align: middle;
  text-align: center;
  font-size: 40px;
  transition: all 0.5s ease;
}

另一将被切换的按钮，它将把元素的位置覆盖到屏幕顶部。
```
.parentMod {
  top: 0px;
}  
```

我在按钮上添加了一个事件侦听器，因此您可以通过单击鼠标切换状态来查看动画：

const changeLayout = () => {
  document.querySelector('.parent').classList.toggle('parentMod');
};

.container {
  height: 200px;
}

.parent {
  position: absolute;
  left: 25%;
  top: calc(50% - 47px);
  width: 50%;
  vertical-align: middle;
  text-align: center;
  font-size: 40px;
  transition: all 0.5s ease;
}

.parentMod>div {
  font-size: 20px;
  display: inline-block;
}

.parentMod {
  top: 0px;
}

.parentMod>div:nth-child(2):before {
  content: ': ';
}

<div class="parent">
  <div>Label</div>
  <div>Textbox</div>
</div>

<button onclick="changeLayout()">Switch Layout</button>

Answer 2

注意：我已经看到了您想要实现的结果：将两个元素从inline平滑地转换为inline-block。我找到了一种方法。由于与最初的解决方案完全不同，因此我决定发布另一个答案。

设置

您可以使用普通CSS来获得所需的结果，但是有两点需要注意。

我们将主容器.parent与absolute

一起放置

.parent { 
  position: absolute;

  /* dimensions */
  width:  35%
  height: 20%;

  /* centered horizontally */
  margin: 0 auto; 
  left: 0;
  right: 0;

  /* centered vertically */ 
  bottom: 0; 
  top: 45%; 
}

更改布局.parent将获得类.parentMod，该类将覆盖.parent的某些初始属性：
```
.parentMod {
  top: 10px;
  height: 12%;
}
```
两个子元素都太靠absolute定位，必须设置其在.parent内的垂直位置（用百分比确保布局能够响应）：
```
.parent > div:nth-child(1) {
  left: calc(50% - 125px);
}
.parent > div:nth-child(2) {
  left: calc(50% - 10px);
}
```
然后我们可以在布局更改后设置其位置：
- 两个子元素都将具有相同的垂直位置：
```
.parentMod > div:nth-child(1), 
.parentMod > div:nth-child(2) {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
}
```
- 第二个子元素将具有垂直偏移（它将位于第一个子元素下方）：
```
.parentMod > div:nth-child(2) {
  top: 35px;
}
```

演示

总体结果如下：

const changeLayout = () => {
  document.querySelector('.parent').classList.toggle('parentMod');
};

.parent {
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  right: 0;
  top: 45%;
  left: 0;
  width: 35%;
  height: 20%;
  font-size: 40px;
  transition: all 2s ease;
}

.parent > div {
  text-align: center;
  width: 130px;
  margin: 0px;
  position: absolute;
  top: 10px;
  transition: all 2s;
}

.parent > div:nth-child(1) {
  left: calc(50% - 125px);
}
.parent > div:nth-child(2) {
  left: calc(50% - 10px);
}

.parentMod {
  top: 10px;
  height: 12%;
}
.parentMod > div:nth-child(1), 
.parentMod > div:nth-child(2) {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
}

.parentMod > div:nth-child(2) {
  top: 35px;
}

<div class="parent">
  <div>Label</div>
  <div>Textbox</div>
</div>

<button onclick="changeLayout()">Switch Layout</button>

Answer 3

您可以尝试完全定位它们，并在父级上使用flex-box将它们居中对齐。

这不是一个非常灵活的解决方案，但是可以完成工作！

HTML

<div class="container">
  <span id="one">Label</span>
  <span id="two">Textbox</span>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height:200px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
#one, #two {
  font-size: 1em;
  display: block;
  height:1em;
  text-align: center;
  margin: 0;
  transition: all 500ms ease;
}
#one {
  position: absolute;
}
#two {
  position:absolute;
  margin-top:1em;
}
.container:hover #one,
.container:hover #two {
  font-size: .75em
}

.container:hover #one{
  margin-left: -10px;
}
.container:hover #two{
  margin-top: 0;
  margin-left:30px
}

从垂直对齐到水平对齐对两个元素进行动画处理

3 个答案:

初始响应

带有动画

设置

演示