Javascript 将两个元素从垂直对齐设置为水平对齐

我有一个页面，在文本框的正上方有一个标签，这些标签在页面内垂直居中。验证输入后，我想缩小元素并将它们滑动到页面顶部，同时“旋转”它们，使它们彼此相邻，标签在左侧，文本框在右侧。从本质上说，我想从屏幕中间大到：

                Label
               Textbox

请在屏幕顶部将其恢复为常规大小：

           Label: Textbox

我只是想不出最好的处理方法

这里要说清楚的是，我想制作动画。在流体运动中从顶部示例转到底部示例

以下是我开始时的一部分内容：

下面是我想结束的一段话：

从小提琴1到小提琴2的动作需要设置动画。这就是我正在努力解决的问题。

初始响应

您可以使用

vertical align:middle

和

text align:center

将内容垂直和水平居中。在示例中：

.parent1

要使两个

div

在同一水平面上相邻，请使用

display:inline block

。在示例中：

.parent2

.parent1、.parent2{
垂直对齐：中间对齐；
文本对齐：居中；
}
.parent1{
字体大小：30px；
}
.父母2{
字体大小：20px；
}
.parent2>div{
显示：内联块；
}
.parent2>分区：第n个孩子（2）：之前{
内容:'：'；
}

标签
文本框


标签
文本框

您可以尝试绝对定位它们，并使用父对象上的flex box将它们居中对齐

这不是一个非常灵活的解决方案，但它完成了任务

HTML

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

---

注意：我看到了您想要实现的结果：将这两个元素从

内联

平滑地转换为

内联块

。我已经找到了一种方法。由于这与我最初的解决方案完全不同，我决定发布另一个答案

---

安装程序 使用简单的CSS可以达到预期的效果，但是有几件事需要注意

• 我们将使用

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

• 两个子元素在

  绝对

  中的位置都太高，它们在

  中的垂直位置太高。必须设置父元素（使用百分比以确保布局响应）：
  
  

• 当布局发生变化时，我们可以设置它们的位置：
  • 两个子元素将具有相同的垂直位置：

    .parentMod > div:nth-child(1), 
    .parentMod > div:nth-child(2) {
      top: 0px;
      left: 0px;
      right: 0px;
      width: 100%;
    }
    

  • 第二个子元素将具有垂直偏移（将位于第一个子元素下方）：

---

演示 总的来说，结果如下所示：

constchangeloayout=（）=>{
document.querySelector（'.parent'）.classList.toggle（'parentMod'）；
};
.parent{
位置：绝对位置；
保证金：0自动；
底部：0；
右：0；
最高：45%；
左：0；
宽度：35%；
身高：20%；
字体大小：40px；
过渡：一切都很轻松；
}
.parent>div{
文本对齐：居中；
宽度：130px；
边际：0px；
位置：绝对位置；
顶部：10px；
过渡：所有2；
}
.parent>div:n个子项（1）{
左：计算（50%-125px）；
}
.parent>div:n个子项（2）{
左：计算（50%-10px）；
}
parentMod先生{
顶部：10px；
身高：12%；
}
.parentMod>div:n个孩子（1），
.parentMod>div:n个孩子（2）{
顶部：0px；
左：0px；
右：0px；
宽度：100%；
}
.parentMod>div:n个孩子（2）{
顶部：35px；
}

标签
文本框
开关布局
显示：内联块
但是你如何制作动画？你能给我们提供一个片段吗？当然@lance你必须添加片段
但是你如何制作动画？
。你什么时候提到给元素设置动画的？？你需要表现出最小的努力，否则我们不会帮助你。你知道我如何在这两者之间设置动画吗？@Lance看一下我的编辑。让我知道这是否对你有效。这与我的目标非常接近。唯一的一件事是我希望把一切都搞活。不仅是从页面中心到顶部的过渡，还包括元素的大小和标签向左移动。在我的脑海里，我想象着他们都在顺利过渡。但你比我做得更远，所以我很感激！您可以将转换规则设置为单个CSS属性。以下操作将使字体大小顺利更改：
.parent>div{transition:font-size 2s；}
。如果您觉得这个答案很有用，请不要忘记升级/接受它以供将来参考。是否可以将更改设置为“显示：内联块”动画？非常感谢，这正是我一直在寻找的，我学到了很多。这是我为我的特定用例做的最后一把小提琴。我很高兴能帮上忙，好小提琴！
.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;
}