如何使Bootstrap表单Label文本在元素内垂直居中并对齐输入框左侧中部？

要让label文本在元素内垂直居中，并显示在输入框左侧中部，只需修改label的CSS样式：

.new-food-form label { 
  margin-right: 0.5vw;
  /* 添加以下两行实现垂直居中 */
  display: flex;
  align-items: center;
}

原理说明 #

你的布局中，包含label和输入框的父容器已经使用了d-flex，这会让label被拉伸至与输入框相同的高度，但label默认是inline元素，文本默认沿顶部对齐。添加display: flex; align-items: center;后，label自身变为flex容器，内部的文本会自动在垂直方向上居中，同时保持与输入框一致的高度，最终呈现出输入框左侧中部对齐的效果。

如果需要避免label文本换行、让布局更整齐，还可以额外添加样式：

.new-food-form label { 
  margin-right: 0.5vw;
  display: flex;
  align-items: center;
  white-space: nowrap; /* 防止文本换行 */
  min-width: 65px; /* 可选：设置最小宽度让标签对齐更统一 */
}

内容的提问来源于stack exchange，提问作者Matheus Caetano Rocha