如何在ASP.NET表单中水平对齐div与label标签

嘿，我瞅你在调整Bootstrap模态框里的表单布局时遇到了麻烦——想让id为labelAlign的标签和上方的div水平并排却搞不定，对吧？别着急，这其实是因为默认的块级元素会自动换行，结合你用的Bootstrap框架，我给你两个实用的解决办法：

解决方案1：利用Bootstrap网格系统（推荐） #

既然你已经在用Bootstrap的样式，最稳妥且适配响应式的方式就是用它的网格布局来控制元素排列。把你要并排的两个元素（inputNewPasswordAgain所在的form-group和labelAlign）放在同一个.row容器里，用列类分配宽度：

修改后的核心代码片段：

<div class="form-group">
    <label for="inputNewPassword">Yeni Şifreniz</label>
    <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" />
</div>
<!-- 用row包裹，实现横向排列 -->
<div class="row align-items-center">
    <div class="col">
        <div class="form-group mb-0">
            <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label>
            <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" />
        </div>
    </div>
    <div class="col-auto">
        <label id="labelAlign" class="ml-3">How Can i align this label near the div above</label>
    </div>
</div>

几个关键细节：

• .row是Bootstrap的行容器，.col让form-group占满剩余宽度，.col-auto让标签只占用自身内容的宽度
• .align-items-center让两个元素在垂直方向居中对齐，视觉上更协调
• 给form-group加.mb-0去掉默认的底部外边距，避免行内间距过大

解决方案2：用内联块快速调整（适合简单场景） #

如果不想大改结构，也可以通过CSS把元素改成内联块来实现并排：

先添加自定义CSS：

#labelAlign, .inline-form-group {
    display: inline-block;
    vertical-align: middle;
    width: 48%; /* 可根据实际需求调整宽度比例 */
    margin-right: 1%;
}

然后修改HTML结构：

<div class="form-group inline-form-group">
    <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label>
    <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" />
</div>
<label id="labelAlign">How Can i align this label near the div above</label>

不过这个方式在响应式场景下的适配性不如网格系统，所以优先推荐方案1哦。

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