CODEWITHSUNDEEP
htmlcssasp.netalignment
Barsblue
Barsblue

Reputation: 109

Align a div and a label horizontally

I have a asp.net form that contains tags.I want to align a label side by side that div horizontally.But i cant manage what i do.I have added my code snippet below.Can you help me please?

My Code Snippet

<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>

enter image description here

Upvotes: 0

Views: 220

Answers (2)

Calvin Nunes
Calvin Nunes

Reputation: 6516

Does this helps you? 

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>

Upvotes: 1

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

Why not add the label class within the given div?

<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>

Or add inline-block to the div:

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

Snippet:

.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>

Upvotes: 1

Related Questions