Make sure that a div and a label are perfectly aligned in a horizontal

I am trying to align a label next to a div horizontally in my asp.net form, but I am having trouble accomplishing this. Below is the code snippet that I have been working with. Can someone please help me?

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">Password Change</h4>
                 </div>
                  <div class="modal-body">
    <div class="form-group">
        <label for="inputPassword">Your Password</label>
        <input class="form-control" runat="server" placeholder="Current Password" type="password" id="inputPassword" />
    </div>
    <div class="form-group">
        <label for="inputNewPassword">New Password</label>
        <input class="form-control" runat="server" placeholder="New Password" type="password" id="inputNewPassword" />
    </div>
                      <label id="labelAlign">How can I align this label next to the above div?</label>
     <div class="form-group">
        <label for="inputNewPasswordAgain">Confirm New Password</label>
        <input class="form-control" runat="server" placeholder="Confirm New Password" 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="Change" /> 
                      <asp:Button ID="btn_PasswordClose" class="btn btn-primary"   runat="server" data-dismiss="modal" Text="Close" /> 
                  </div>
              </div>
          </div>
      </div>

https://i.sstatic.net/SP3Ar.jpg

htmlcssasp.netalignment

Answer №1

Is there a reason why the label class is not included 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>

Alternatively, you can 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>

Answer №2

Is this information beneficial to 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">Password Change</h4>
         </div>
         <div class="modal-body">
            <div class="form-group">
              <label for="inputPassword">Your Password</label>
              <input class="form-control" runat="server" placeholder="Current Password" type="password"                  id="inputPassword" />
            </div>
            <div class="form-group trial">
              <label for="inputNewPassword">Your New Password</label>
              <input class="form-control" runat="server" placeholder="New Password" type="password"                    id="inputNewPassword" />
            </div>      
            <div class="form-group">
               <label for="inputNewPasswordAgain">Repeat New Password</label>
               <input class="form-control" runat="server" placeholder="Repeat New Password"                            type="password" id="inputNewPasswordAgain" />
            </div>
        </div>
      </div>
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes inline-blocks to malfunction after a non-breaking space is inserted?

Here is some HTML code: <p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> <p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p> Below is some CSS styling: ...

css

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting wi ...

javascriptcsstwitter-bootstrapreactjswebpack

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Can someone help me understand this strange behavior I am experiencing across all browsers? <div style="margin-top:5px"> <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button> <butt ...

htmlcssangularjs

What causes an asynchronous method to constantly block a thread?

Having an async method that looks like this: public static async Task<bool> SendMailAsync() { // ...something } This particular method takes a long time to return a result. Additionally, there is another method similar to the first one: public ...

c#asp.netasynchronousasync-await

Concealing jQueryUI tooltip upon clicking a "target=_blank" link

I have implemented jQuery to display tooltips for all links on my webpage that include a 'details' attribute. $(function() { $tooltip = $(document).tooltip({ show: false, track: true, ...

javascriptjqueryhtmljquery-uitooltip

Ways to delete an image from a batch file uploading feature

I encountered an issue with my multiple image upload function that includes preview and remove options. When I select 4 images and preview them correctly, removing 2 from the preview still results in uploading all 4 images to the database. $(document).rea ...

phpjqueryajaxhtml

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

Use jQuery to generate and add several elements to the DOM

Hey there! Currently, I'm working on a real-time chat application using socket io. My goal is to display the user's username and message in a unique way by encapsulating the username in a strong tag. I've made some attempts: $('<div ...

javascripthtmljquery

HTML Autocomplete Error 404 Resolved with ASP.NET and JQuery

My autocomplete feature in an ASP.NET project is not working, despite trying different methods. I have set up a database called Diagnose, but when I try to implement it, I keep getting a 404 error on jQuery. Below is my HTML code: <script src="htt ...

htmljqueryasp.netautocompletehttp-status-code-404

Retrieve the HTML tag content as a string using jQuery

For my OSINT project, I am developing a tool that needs to extract text from a specific HTML code string. $("p").text(); I'm looking for a way to make my variable work with the above code. Any suggestions? Share your ideas! Solution: $.ajax({ ...

jqueryhtmljsonparsing

Establishing a connection between JavaScript and MySQL within an HTML document

Recently, I started using node.js's node-mysql driver for MySQL and decided to write this piece of code: var mysql = require("mysql"); var connection = mysql.createConnection({ host : "localhost", user : "root", ...

javascripthtmlmysqlnode.js

ASP.NET to .MDB Update Query not functioning as expected

Scenario: I am facing an issue with an update query for a Microsoft Access DB that keeps failing. Surprisingly, the query runs smoothly when executed within the database itself but encounters errors when executed from the CodeFile of my .aspx page. To tr ...

sqlasp.netvb.netms-access

Determining html column values using a related column and user input

Is there a way to populate an HTML table column (using Javascript or jQuery) based on the values in another column and an input field? For instance, if I input the number 115 into the field, then the advance column should display a value of 1 for each ath ...

javascriptjqueryhtml

Run javascript code after the page has transitioned

Struggling to create a dynamic phonegap app with jQuery Mobile, the issue arises when loading JavaScript on transition to a new page. The structure of my index page is as follows: <body> <div data-role="page" id="homePage"> <div data- ...

javascriptjqueryhtmljquery-mobilejquery-mobile-ajax

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

htmlcssforms

How can I maintain the hover state even when the mouse is not hovering over it in CSS?

I have a lineup of 5 div boxes, and whenever you hover over one, it expands to fill the width of the screen. The default width of the blue div is set to cover the whole screen, allowing for the application of CSS to shrink it when hovering over the other ...

csshtmlhovertransition

Is there a way to update the href attribute within the script section in vue.js?

I need to dynamically set the href attribute of a link based on data retrieved from a database and rendered in the methods section. <template v-if="header.value == 'ApplicationName'"> <a id="url" href="#" target="_blan ...

javascripthtmlvue.jsdatatablevuetify.js

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

phphtmlcssresponsive

What is the best way to keep my bottom navigation bar attached to my top navigation bar?

I am facing an issue with my two navbars. The top navbar sticks to the top of the page when the user scrolls down, which works perfectly fine. However, when the user logs in, the bottom navbar becomes visible. Unfortunately, the bottom navbar is not sticky ...

javascriptjqueryhtmlcsstwitter-bootstrap