Align the label vertically with the corresponding input field

I am currently in the process of revamping an old HTML form to eliminate the use of tables. I found a solution on this site to give the label a fixed width, and here is how it looks in the current code:

HTML

<div id="form">
    <label for="field1">Name&nbsp;</label>
    <input type="text" id="field1" value="default name" />
</div>

CSS

label {
    float: left;
    width: 50px;
    white-space: nowrap;
}
input {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;
}

Currently, the label is aligned at the top vertically. How can I align both the label and field vertically to the center?

Edit: Many suggestions I've received involve adjusting the position of the label by a set number of pixels. However, I want to avoid hard-coding it that way as it doesn't truly achieve vertical alignment in the middle.

Following some helpful advice from here, I have made some improvements to my code. Check out the updated code above.

I attempted using vertical-align: middle; in label but it didn't produce the desired result. Please keep in mind that the user will be accessing the platform through Internet Explorer.

htmlcssvertical-alignment

Answer №1

If my understanding is correct, you are seeking to vertically center align the label and the input with respect to each other rather than the whole page. There are various methods to achieve this.

The Flexbox Approach

If you prefer a modern CSS solution that prepares you for the future, consider using flexbox. Here is an example:

.fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}
/*flexbox approach.
* height and background added for clarity.
*/

#form {
  height: 100px;
  background: #bada55;
  display: flex;
  align-items: center;
}
<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

The vertical-align Method

This method works effectively when both the label and the input are placed on the same line as inline-block elements. Here is an example:

.fieldHeading {
  width: 50px;
  vertical-align:middle;
}
.fieldSpan {
  overflow: hidden;
  vertical-align:middle;
}
#field1 {
  width: 150px;
}
<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

The height & line-height Combination

This method can also be effective, but it may not work well if your label is long and wraps onto multiple lines. Here is an example:

.fieldHeading {
  width: 50px;
}
.fieldSpan {
  overflow: hidden;
}
#field1 {
  width: 150px;
}

/*line-height and height set the same for parent
* background added for clarity.
*/
#form {
  line-height: 40px;
  height: 40px;
  background: #bada55;
}
<div id="form">
  <label for="field1" class="fieldHeading">Name&nbsp;</label>
  <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
</div>

I trust that these methods will assist you not only in this particular issue but also in resolving any other vertical alignment challenges you encounter.

Answer №2

To achieve the desired outcome, you have the option to utilize either the line-height or margin-bottom properties.

Illustration

#content paragraph {
    line-height:1.6;
    margin-bottom:4px;
}

This will implement the styling on all paragraphs within the content section. For a more targeted approach, consider using a specific css class like .sectionTitle instead of targeting all paragraphs under a certain section.

Answer №3

Are you in need of something similar?

<div id="custom-form">
    <div class="centered-content">
        <label for="input-field" class="field-name">Name: </label>
        <span class="input-span"><input type="text" id="input-field" value="default name" /></span>
    </div>
</div>

<style>
.field-name {
    float: left;
    width: 50px;
}
.input-span {
    display: block;
    overflow: hidden;
    width: *;
}
#input-field {
    width: 150px;   
}

#custom-form {display: table;height:100%;}

.centered-content {
    display: table-cell;
    vertical-align: middle; 
}

</style>

Answer №4

Personally, I believe the key is to adjust the margin-bottom property as needed

.fieldHeading {
    float: left;
    width: 50px;
    margin-bottom: 5px;
}

Answer №5

Here are some tips for using CSS:

.title {
  display: inline-block;
  width: 50px;
  vertical-align: middle;
}
#inputField { width: 150px; }

Remember that span is an inline element.

It's not necessary to use a span tag to enclose your input element.

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

Three columns with the first column having a flexible width

On various coding forums, I've come across multiple examples using floats, but none have provided a solution for my specific issue. I have three column divs with varying widths - the first column is dynamic while the other two are fixed. Looking for a ...

csslayout

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

While exploring the Vuestic admin dashboard tool, I noticed a glitch in the UI where the donut chart appeared larger than its container. I tried to troubleshoot and fix it for submission as a PR, but I encountered an unfamiliar CSS selector > * while de ...

cssvue.jsvue-component

Having trouble with changing the class using Jquery click function

Originally, I had the code in an ASP.Net project, but to troubleshoot, I moved it to a separate web server. However, I am still unable to switch between the tab panes with the buttons. Any assistance in debugging this issue would be greatly appreciated. S ...

jqueryhtml

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

javascriptjqueryhtmlangularjsiframe

Identify the month in which there is no data available in the database

The existing query is working perfectly, but the issue is that there is no data for the current month (April), causing it not to list the month with 0 interviews. How can I make it so that the month is listed with 0 interviews? QUERY select distinct from ...

phphtmlmysqlsql

Is there a way to identify the ID of a button using Javascript specifically in Internet Explorer and Safari browsers?

Within my code, there lies a directive that contains the attribute on-blur = blurFunc($event). Imagine this scenario: I interact with a button bearing the id "myButton" located outside of the directive. How can I determine which specific button was clicke ...

javascriptangularjshtmlinternet-explorersafari

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

function adjustHeight(){ var headerHeight=$(element).find('.header').outerHeight(); console.log(headerHeight); var temp=$(window).height()-headerHeight; console.log(temp); $('.users ...

javascriptjqueryhtmlcss

Developing a side panel for navigation

My goal is to create a sidebar that shifts to the right from the left side and makes space on the page when the hamburger menu is pressed. I have made progress in achieving this, but I am encountering difficulties with the animation. const btnToggleSide ...

javascripthtmlcss

retrieving the webpage's HTML content from the specified URL using AngularJS

Utilizing the $http.get('url') method to fetch the content located at the specified 'url'. Below is the HTML code present in the 'url': <html> <head></head> <body> <pre style = "word-wrap: break ...

javascripthtmlangularjs

Creating Interactive Graphs with HTML and JavaScript: A Guide to Dynamic Graph Drawing

I am seeking to create a dynamic graph using standard HTML, JavaScript, and jQuery (excluding HTML5). The nodes will be represented by divs with specific contents, connected by lines such as horizontal and vertical. The ability to add and remove nodes dyn ...

javascriptjqueryhtmlgraph

The use of pattern fill in fabric.js is causing a decrease in rendering speed

I recently attempted to create a clip mask effect on a large image by using the picture as a pattern and setting it to the svg paths that support the desired shape. You can view the slow-loading jsfiddle example here: http://jsfiddle.net/minzojian/xwurbw ...

javascripthtmlsvgfabricjs

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

javascripthtmlvisibility

I haven't quite mastered the art of styling and JavaScript, but I'm currently focused on creating an HTML form with

I attempted to create a button, but it's not functioning correctly. It should display 'Submit', but instead, it just shows a square. Since I haven't learned CSS yet and my online video instructor hasn't covered it either, I need as ...

htmlforms

Make the background extend all the way down to the bottom of the page, whether it scrolls or

I am seeking a solution to have the background extend to the bottom of the page, while accommodating both short and long pages. <html> <body> <div id="container">Container of variable height</div> </body> </htm ...

htmlcss

The RequiredFieldValidator and RegularExpressionValidator are not functioning properly

I have the following code snippet in one of my "C#" aspx pages. Despite having validation set up, the event attached to cmdPassword still fires even when the textbox is empty. Why are the validations not working? <tr> <td align="left" valign="t ...

c#htmlasp.netvalidation

Is it possible to modify this code to accept multiple IDs at once?

I'm attempting to create a form in JavaScript where, upon entering the necessary details and clicking submit, the user's email client opens with the information pre-filled for easy sending. However, I am facing challenges as my code involves mult ...

javascripthtml

Is it possible to create a QR Code using Ionic 5?

Is there a way to generate QR Codes in Ionic 5? I attempted it, but keep receiving an error stating that the qrcode element is not recognized. Here is my code: qrcode.html <ion-item> <ion-input type="text" placeholder="My QR d ...

htmlangularionic4

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

javascriptjqueryhtmlcssjquery-mobile