不使用flex如何实现div容器内部元素的水平对齐

以下是两种可直接落地的实现方式：

方案1：inline-block + vertical-align 方案（最推荐，无浮动副作用） #

核心改动点 #

• 移除父容器.input-group的flex相关样式
• 给父容器设置font-size: 0消除inline-block元素之间的默认空白间隙
• 给label、input都添加vertical-align: middle实现垂直居中对齐
• input的宽度改为calc(100% - 7rem)适配label固定宽度，避免换行

完整代码 #

<div class="input-group" style="font-size: 0;">
  <label style="width: 7rem; display: inline-block; vertical-align: middle; font-size: 15px;">
    <span class="control-label" style="color: rgb(64, 64, 64); font-family: Arial; font-size: 15px; line-height: 1.5; vertical-align: middle;">Email:</span>
    <span class="mandatory" style="vertical-align: middle;">*</span>
    <small class="smallExplain"></small>
  </label>
  <input class="form-control" type="email" name="emailId" placeholder="Email" required="" style="color: rgb(100, 96, 96); font-family: Arial; margin-bottom: 0px; width: calc(100% - 7rem); display: inline-block; vertical-align: middle; padding: 0.375rem 0.75rem; line-height: 1.5; background-color: rgb(255, 255, 255); border: 3px solid rgb(0,0,0); border-radius:0.7rem !important; font-size: 15px;">
</div>

如果不想修改父容器font-size，也可以直接把HTML代码中label结束标签和input开始标签之间的换行/空格删掉，同样可以消除间隙

方案2：浮动方案 #

核心改动点 #

• 移除父容器flex相关样式
• 给label和input都设置float: left
• 父容器添加overflow: hidden触发BFC清除浮动，避免高度塌陷
• input宽度同样设置为calc(100% - 7rem)适配

完整代码 #

<div class="input-group" style="overflow: hidden;">
  <label style="width: 7rem; float: left;">
    <span class="control-label" style="color: rgb(64, 64, 64); font-family: Arial; font-size: 15px; line-height: 1.5; vertical-align: middle;">Email:</span>
    <span class="mandatory" style="vertical-align: middle;">*</span>
    <small class="smallExplain"></small>
  </label>
  <input class="form-control" type="email" name="emailId" placeholder="Email" required="" style="color: rgb(100, 96, 96); font-family: Arial; margin-bottom: 0px; width: calc(100% - 7rem); float: left; padding: 0.375rem 0.75rem; line-height: 1.5; background-color: rgb(255, 255, 255); border: 3px solid rgb(0,0,0); border-radius:0.7rem !important;">
</div>

浮动方案需要注意父容器必须清除浮动，否则会影响后续元素的布局

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