如何将输入字段的文本水平对齐到相邻元素的文本

Question

亲爱的堆栈溢出社区，

我正在寻找一种干净的方法来（水平）将元素的文本与 angular-material 输入字段的文本对齐。

使用以下代码时：

 <div style="display: flex"> <div>Hello: </div> <mat-form-field> <input matInput value="world"/> </mat-form-field> </div>

我最终得到这样的结果：

我需要对齐 div 的文本或任何其他元素的文本。 所以，我正在寻找的是这样的：

主要问题

我应该如何 go 关于对齐两者？

奖金问题

默认的 alignment 相距甚远。 我想要一些奇怪的东西吗？ 我是在尝试实现根本错误的事情，还是每个人都在“手动”调整它们？

可能相关的问题

这个问题可能是相关的，因为问题非常相似。 但是至少对我来说，提供的代码太不同了，无法为我的问题提取可能的解决方案。

提前致谢，

沃特

Answer 1

我的问题得到了很好的回答，但是，由于某种原因，它已被删除。 因此，我将尝试重复我从中学到的东西。

---

本质上，您需要做的就是对齐 flexbox 的项目。 如果您想通过文本对齐 flexbox 中的项目，添加align-items:baseline可以解决问题。

像这样：

<div style="display: flex; align-items: baseline">
  <div>Hello: </div>
  <mat-form-field>
    <input matInput value="world"/>
  </mat-form-field>
</div>

或者，根据之前发布的答案：

#box {
  display: flex;
  align-items: baseline;
}

<div id = "box">
  <div>Hello: </div>
  <mat-form-field>
    <input matInput value="world"/>
  </mat-form-field>
</div>

有关更多信息，请查看此网站。 它是您需要了解的有关 flexbox 的任何内容的综合指南。