Bootstrap表单中OR标签垂直居中对齐问题求助

现有如下HTML代码：

<div class="form-group row">
              <div class="col-md-3">
                <label asp-for="id"  class=" control-label " style="font-weight:bold;"></label>
                <input asp-for="id" class="form-control" />
                <span asp-validation-for=id" class="text-danger"></span>
         </div>
          <div class="col-md-1">
              <label class=" control-label " style="font-weight:bold;">OR</label>
          </div>
         <div class="col-md-3">
                <label asp-for="EmailAddress"  class=" control-label " style="font-weight:bold;"></label>
                <input asp-for="EmailAddress" class="form-control" />
                <span asp-validation-for="EmailAddress" class="text-danger"></span>
         </div>
            <div class="col-md-1">
                 <label class=" control-label " style="font-weight:bold;">OR</label>
            </div>
            <div class="col-md-3">
                <label asp-for="Customer" class=" control-label " style="font-weight:bold;"></label>
                <input asp-for="Customer" class="form-control" />
                <span asp-validation-for="Customer" class="text-danger"></span>
            </div>
            <div class="col-md-1">
              
            </div>
         </div>

运行后OR标签处于顶部悬浮状态，需要将OR标签与输入框垂直居中对齐，解决对齐不当的问题。

你的代码基于Bootstrap框架，直接利用框架内置工具类即可快速解决问题，提供两种实用方法：

方法一：使用Bootstrap flex工具类 #

给包含OR标签的col-md-1容器添加d-flex align-items-center类，通过flex布局实现垂直居中：

<div class="col-md-1 d-flex align-items-center">
    <label class="control-label" style="font-weight:bold;">OR</label>
</div>

该类会让容器内的元素自动在垂直方向上居中，完美匹配输入框的高度位置。

方法二：自定义内联样式 #

若不想新增类，可直接给OR标签的容器添加垂直对齐样式：

<div class="col-md-1" style="display: flex; align-items: center;">
    <label class="control-label" style="font-weight:bold;">OR</label>
</div>

效果与方法一一致，适合临时调整场景。

另外注意代码中的一处语法错误：<span asp-validation-for=id" 应修正为 <span asp-validation-for="id"，补全缺失的前引号，避免潜在的验证功能异常。

内容的提问来源于stack exchange，提问作者Alex