Can multi-line labels be centered vertically?

After countless hours of research and experimentation without success, I have a strong feeling that the answer is no. However, I would greatly appreciate confirmation one way or the other.

I am faced with a challenge where I have a multi-line label to the left of a select field. Let's assume the label spans 3 wrapped lines. My goal is to align the middle line of the label vertically with the select field. Here's what I envision:

Label Line 1
Label Line 2        SelectField
Label Line 3

This question brings back memories of a similar query from a few years ago, which unfortunately did not receive a definitive answer: Vertical center label with text area and with select and with textbox. One user mentioned that JavaScript might be necessary for this task.

I've put together a FIDDLE showcasing my current progress. While I've managed to find some intriguing variations, none quite achieve the desired alignment.

If anyone can confirm whether this alignment is feasible or not, I would greatly appreciate it! Thank you so much!!!

[EDIT: Spelling]

htmlcssforms

Answer №1

Give this a shot!

Markup

<div class= 'container'>
    <label class="left-label" for='name'>NAME 1: Very Long Multi-Line Label</label>
    <select class='custom-select'>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</div>

CSS

div.container {
    border: 1px solid red;
    height: 150px;
    width: 400px;
}
label.left-label {
    width: 90px;
    text-align: right;
    background: lightblue;
    display: inline-block;
    vertical-align: middle;
    float: none;
}
select.custom-select {
    width: 100px;
    display: inline-block;
    margin-left: 20px;
}

Check out the Fiddle here

Answer №2

Just utilize a table to organize your content.

td { vertical-align: middle; }
.narrow { width:8em; padding-right: 2em; }
<table>
  <tr>
    <td class="narrow"><label for="menu">Wrap label text across multiple lines here</label></td>
    <td><select name="menu" id="menu">
      <option>Menu item #1</option>
      <option>Menu item #2</option>
      <option>Menu item #3</option>
      <option>Menu item #4</option>
    </select></td>
  </tr>
</table>

Answer №3

Achieving this is definitely possible by utilizing the power of flexbox. Feel free to explore an example by visiting this link. Make sure to include the following code in your fiddle for optimal results:

div.divclass {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 150px;
  width: 400px;
  border: 1px solid red;
}

select.selectclass {
  width: 100px;
  display: flex;
}

To delve deeper into the world of flexbox, check out more information here.

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

Ways to display an icon with an underline effect upon hovering over text

I have implemented a CSS effect where hovering over text creates an underline that expands and contracts in size. However, I now want to display an icon alongside the text that appears and disappears along with the underline effect. When I try using displa ...

cssangular

Using jQuery to reset the position of animated divs

I am currently working on a code that expands and centers a div when hovered upon using the following script: $(document).ready(function(){ //animation on hover $('#sliding_grid li').hover(function() { ...

javascriptjquerycss

Drag the label into the designated paragraph to copy the text. Click on the specific point to transfer the text

How can I copy the text from a label to a specific point by dragging it? <label id="text_to_be_copied" > i am a student </label> Below is a paragraph where I want to paste the copied text: <p> this is the content where I want to copy t ...

javascriptjqueryhtmldrag-and-drop

Tips for properly aligning an image within an owl carousel

Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class. You can access Owlcarou ...

javascripthtmlcsssassowl-carousel

Contrasting WebSQL and SQLite in terms of their utility in mobile applications and web browsers

Could you confirm if WebSQL and SQLite are the same? Are both WebSQL and SQLite available in PhoneGap? Will the JavaScript code used for WebSQL in a web browser be the same for a mobile app, or will we need different code? What advantages does WebSQL ha ...

javascriptangularjshtmlsqliteweb-sql

Changing `margin-top` will also affect adjacent sibling elements

Currently, I am in the process of designing an About page for my website. Within this layout, there is a main parent element named maindiv, which utilizes a flexbox to house two children: leftcont and rightcont. My goal is to implement an animation using m ...

htmlcssanimationcss-animationsmargin

I attempted to pull information from the database and display it in my checkboxes. However, I encountered an issue where I am unable to save the selected checkboxes back to the database

This code snippet is written in Blade for a reservation form: <div class="col-lg-6"> <div class="contact-form"> <form id="contact" action="{{url('/reservatio ...

phphtmllaravelwebcheckbox

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

javascripthtmlangularjsangular-formly

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Tips for aligning 2 columns perfectly in a 3 column layout

I am facing an issue with a grid section where the grid-template-column is set for 3 columns, but sometimes the content loaded dynamically only fills 2 columns. I am attempting to center the columns when there are only 2. Despite going through the grid CS ...

cssgridmultiple-columns

What is the process for adding personalized arrows to a slick slider that switches images when hovered over?

I'm currently utilizing the slick slider from . My goal is to have my custom arrows change appearance when hovered over. Below you will find the JavaScript code I've implemented to customize the left and right arrows within the slider. However, ...

javascriptcssslick.js

Angular select element is not functioning properly with the `addEventListener` method

My current project involves creating a table using the primeng library. The table consists of three rows and three columns, and all the data is static. Even though I am utilizing an external library, I find myself traversing the DOM directly. <p-table ...

javascripthtmlangulartypescriptdom-events

Comprehending the importance of a selector in a dropdown menu

Trying to figure out how to create a drop-down menu from CSS tricks, I found this code snippet: <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#"&g ...

htmlcss

Processing Rails forms using HTML instead of JavaScript can provide a more streamlined and efficient

Within my Rails application, I have implemented a form that is intended to be submitted via ajax (setting remote to true). This form provides users with the option to either add an embedded video or upload a video file to the application. To create the for ...

ruby-on-railsajaxforms

Execute a webpage in the background using PHP

Currently, I'm working on creating a basic PHP script to fetch four images from a server. The catch is that each time I retrieve a new image, I have to access a webpage first - like this: http://example.com/Set.cgi?Image=1 I don't have the abili ...

phpcgihtml

The Ineffectiveness of Social Media Sharing in WordPress

I'm encountering an issue with adding social media sharing buttons to my website's product page. Although I've implemented the PHP code, clicking on the Facebook button only redirects to a page displaying a share button and URL, but it doesn ...

phpcsswordpress

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items. The 'active&ap ...

csssemantic-ui

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Set the minimum width of CSS headers <h1, h2, h3> to align next to a floated image

I am dealing with a layout issue where headlines should be displayed next to floated images if there is enough space, and drop below the images if not. Unfortunately, I do not have access to the HTML code, so I need to solve this problem purely through CSS ...

cssresponsive-designmedia-queries

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml