Is there a way to align input fields alongside the center of their corresponding labels?

Let me illustrate the issue I am encountering:
https://jsfiddle.net/v10un11s/1/

Here is the snippet of my HTML code:

<div>
  <div class="component">
    <div>
      <label for="test1" id="short-label">Short label: </label>
    </div>
    <div>
      <input type="text" id="test1" />
    </div>
  </div>
  <div class="component">
    <div>
      <label for="test2" id="long-label">This is my very lengthy label: </label>
    </div>
    <div>
      <input type="text" id="test2" />
    </div>
  </div>
</div>

Here is my CSS snippet: .

component > div:first-child {
  width: 150px;
  text-align: right;
  margin-right: 5px;
  margin-bottom: 10px;
}

.component > div {
  display: inline-block;
}  

While the current layout aligns the input field to the right of the labels, it does so at the end of the line for a lengthy label. What I aim for is to align the input field to the right and relative middle of the label.

My desired outcome is to have the input field aligned with the third line of the long label in the JS Fiddle example above.

Despite numerous attempts to adjust margins, paddings, and line-height, the ideal solution still eludes me.

Answer №1

All it takes is a single line of CSS!

.element > div {
  display: inline-block;
  vertical-align: middle;
}  

Keep in mind, this technique works for aligning both vertically - so if your content is taller than the label, the label will center to the content.

Answer №2

To center items using Flexbox, apply align-items: center to the .component class.

.component {
  display: flex;
  align-items: center;
}
.component > div:first-child {
  width: 150px;
  text-align: right;
}
<div>
  <div class="component">
    <div>
      <label for="test1" id="short-label">Short label:</label>
    </div>
    <div>
      <input type="text" id="test1" />
    </div>
  </div>
  <div class="component">
    <div>
      <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label:</label>
    </div>
    <div>
      <input type="text" id="test2" />
    </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

The E.js Template encountered an error with an unexpected token "else"

I am in the process of creating a website quickly using e.js & Express. However, I am encountering some problems when trying to use an if-else statement within e.js tags. The if statement works fine, but as soon as I add an else statement, things start t ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

Tips for customizing the Link component in ReactJS to display innerHTML

After researching various methods for extending a React component through inheritance, I discovered that most examples focused on adding events rather than manipulating the innerHtml. This led me to ponder a simpler approach: // React packages import Reac ...

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

Displaying a <div> element within a :before pseudoelement

Implementing the use of :before to insert an icon font into a div for a CSS3 hover state. I am looking to incorporate a div within the <a> tag in order for both elements to function as links: <a href="#set-4" class="column product hi-icon product ...

Customize your form fields with Bootstrap 3 input groups

Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has ...

Remove the PHP MySql record of the currently logged in user

I'm currently working on addressing an issue I've encountered. My goal is to remove a logged-in user from a MySQL database once they click a specific button. The code involved is named changepw.php <?php $servername = "localhost"; $username ...

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

When the div is refreshed, the input box should retain the text instead of clearing it

I am facing an issue with a div that refreshes every 3 seconds. There is an input box inside the div, but whatever I type gets cleared out in 3 seconds. Is there a way to prevent the text from being cleared out and keep it inside the input box? index.js ...

Creating a PDF document using HTML code

I am interested in creating a PDF file from an HTML code that includes the stylesheet rules using PHP. Currently, I am attempting to achieve this with the MPDF library. However, the generated PDF does not resemble the original HTML page. Many elements app ...

Using a new hue for a hyperlink

I currently have the following CSS styling for my links: DIV#tt { background: #fff; color: #333; margin: 0 0 15px; position: relative; padding: 1px; } DIV#tt A, DIV#tt SPAN.link { color: #990000; } These styles work well and chang ...

Altering pointer during drag操作

Is it feasible to customize the cursor during a drag operation? I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor. ...

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

Manipulate the timing of css animations using javascript

I am currently working with a progress bar that I need to manipulate using JavaScript. The demo of the progress bar has a smooth animation, but when I try to adjust its width using jQuery $($0).css({'width': '80%'}), the animation disap ...

Ways to avoid Bootstrap from collapsing every submenu when selecting just one submenu

Having just started learning HTML and CSS, I wanted to create a vertical navigation bar with sub-sub menus. After some research, I found a code snippet that I modified to suit my needs. Below is the updated code: #main-menu { background-color: #2E30 ...

Mirror the image horizontally prior to saving

I'm working on a camera web app that has filters similar to Snapchat. I'm currently facing an issue where the image is mirrored because I'm using the front camera. Is there a way to flip the image before downloading it? Thank you for your re ...

How come defining the state using setTimeout does not display the accurate properties of a child component?

Presented here is a component designed to render a list of items and include an input for filtering. If no items are present or if the items are still loading, a message should be displayed. import { useState } from "react"; export const List = ...

How to pass multiple variables, such as "Value" and "Selected", to the next HTML page in Flask without only passing "Selected"

I am currently utilizing Flask to generate an HTML form (specifically a dropdown menu) with values retrieved from a list output by a Python function. The variable in the Python app.py code is called "two_dimensional_list". Here are some sample values: [[&a ...

Customizing CSS Ordered Lists with :before Pseudo-element Margin Settings

I found a code snippet that I'm using to customize the styling of my ordered list. You can check it out here: http://codepen.io/sawmac/pen/txBhK Here is the HTML code: <ol class="custom-counter"> <li>This is the first item</li> < ...

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...