水平对齐div和标签

Question

我有一个包含标签的asp.net表单。我想水平对齐div的标签。但是我无法管理我的工作。我在下面添加了代码段。能帮我吗？

我的代码段

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <label id="labelAlign">How Can i align this label near the div above</label> <div class="form-group"> <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="modal-footer"> <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordChange_Click" Text="Değiştir" /> <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" Text="Kapat" /> </div> </div> </div> </div> 

Answer 1

为什么不在给定的div中添加label类呢？

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

或将内联块添加到div中：

<div class="form-group" style="display:inline-block">

片段：

 .trial { display: inline-block; } 

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group trial"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <label id="labelAlign">How Can i align this label near the div above</label> <div class="form-group"> <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="modal-footer"> <asp:Button ID="btn_PasswordChange" class="btn btn-primary" runat="server" OnClick="btn_PasswordChange_Click" Text="Değiştir" /> <asp:Button ID="btn_PasswordClose" class="btn btn-primary" runat="server" data-dismiss="modal" Text="Kapat" /> </div> </div> </div> </div> 

Answer 2

这对您有帮助吗？

 label{ width: 170px; position: relative; display: inline-flex; } input{ width: 180px; position: relative; display: inline-flex; } .modal-body{ position: absolute; } 

 <div class="modal" id="passwordModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Şifre Değiştirme</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="inputPassword">Şifreniz</label> <input class="form-control" runat="server" placeholder="Şuanki Şifreniz" type="password" id="inputPassword" /> </div> <div class="form-group trial"> <label for="inputNewPassword">Yeni Şifreniz</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz" type="password" id="inputNewPassword" /> </div> <div class="form-group"> <label for="inputNewPasswordAgain">Yeni Şifreniz Tekrar</label> <input class="form-control" runat="server" placeholder="Yeni Şifreniz Tekrar" type="password" id="inputNewPasswordAgain" /> </div> </div> </div> </div> </div>