Align several labels and text areas in the center

I am facing an issue with aligning multiple labels and textareas together. Currently, they line up like this:

       __________________
      |                  |
      |                  |
Label:|__________________|

However, I want them to appear as follows:

       __________________
      |                  |
Label:|                  |
      |__________________|

While there are solutions available for similar problems, none of them address the specific scenario of having multiple labels and textareas grouped together. I attempted to implement a solution using CSS:

CSS:

.label_textarea {
    vertical-align: middle;
}

HTML:

<p class="label_textarea">
<label>Label for textarea</label>
<textarea rows="5">Textarea</textarea>
</p>

Unfortunately, this approach did not have any effect on the layout. Additionally, the number of label-textarea combinations varies each time, making it difficult to use a fixed solution.

What steps should I take to achieve the desired layout outcome?

htmlcss

Answer №1

To enhance the appearance of the label, consider applying the line-height property in addition to the vertical-align attribute. Check out this Demo for reference.

CSS:

label {
    line-height:50px;
    vertical-align::middle;
    display:block;
    float:left;
    padding:5px 10px;
}
textarea {  
    display:block;
    float:left;
}

HTML:

<p>
    <label>label</label>
    <textarea></textarea>
</p>

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

Issues with the styling of the side navigation bar

How can I center the paragraph content within the .main-content div located to the right of the side navigation? When I apply margin: 0 auto, nothing happens. I believe my CSS is incorrect, but I'm unsure how to correct it. Additionally, I would like ...

htmlcss

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

javascriptjqueryhtmlcsstwitter-bootstrap

Maintain the state of the toggle div after page refresh or modification

In this scenario, I am looking to ensure that my div remains open even if the page is changed or refreshed. Below is the HTML and JavaScript code provided: You can view the working code here: http://jsfiddle.net/wasimkazi/fauNg/1/ $(".widget2").hide( ...

javascripthtmlcss

Blend Image and Text with jQuery when Hovered Over

Alright, so here's the deal - I have an image that needs to smoothly transition to another image when hovered over. I also have some descriptive text that should crossfade into different text corresponding to the second image. The current setup is ki ...

jqueryhtmlhovermouseovercross-fade

Unable to load CSS in Node.js when the parameter in Express.js is too long

I have been working on an application using Node.js, express.js, and ejs. I am utilizing the following code to incorporate ejs and load css: app.engine('.html', require('ejs').__express); app.set('views', __dirname + '/vi ...

cssnode.jsexpressparametersejs

Extract CSS properties to generate a dictionary that maps class names to background images

Suppose my CSS looks like this: .featured .featured_1 { background-image: url("http://test.com/image.png"); margin-top:20px; } In that case, the following PHP function: function extractBackgroundImages($css) { if (!preg_match_all('/&bso ...

phpcssregex

Creating a seamless design with a navigation brand and login button on the same row within a navbar

I am trying to create a fixed navbar at the top of my webpage. The goal is to have the company's logo and name on the left side, with a log-in button on the right side. After reviewing multiple examples online, I found that most of them use a navbar- ...

htmlbootstrap-4nav

"An easy way to dynamically update a select dropdown based on the data of the corresponding row in a table using jQuery

Having some trouble with dynamically populating form input fields in a table. The first row works fine, but when I change the select option in the second row, it affects the previous field instead of the current row: How can I ensure that changing the sel ...

javascriptjqueryhtmlformshtml-table

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

javascriptcssreactjsreact-routerreactcsstransitiongroup

Divide the Javascript code from the HTML Canvas

I have been diving into HTML5 Canvas and exploring how to implement it using Javascript code. However, I am facing difficulties separating the Javascript code from the original html file. Despite trying some solutions: HTML5 Canvas not working in extern ...

javascripthtmlcanvas

What is the best way to include a JavaScript function in a dynamically generated div?

By clicking a button, I am able to dynamically generate a table row that contains a div element with the class "contents." $(document).on("click", ".vote", function() { // Removing selected row var rowLoc = this.parentNode.parentNode. ...

javascriptjqueryhtml

Can you help me modify the navbar color in Bootstrap 4 based on the screen width?

For example, if I use the navbar-dark and bg-dark classes in a nav tag, I want to switch them to navbar-light and bg-light when the screen width is changed to approximately 600px (using Bootstrap 4). ...

htmlcsstwitter-bootstrap

What is the secret to creating double-width characters that are precisely double the size of single-width characters?

When using terminal, many fonts that support double-width characters display them as exactly twice the width of single-width characters. For instance, these two lines should appear with the same width: あああ aaaaaa However, this consistency is not ma ...

htmlcssuser-interfacefonts

Encountered a data retrieval issue while accessing my post.html.erb file

Unfortunately, I am unable to provide specific details about my issue as I am unsure of the exact cause. /db/migrate/XXXXXX_create_restaurants.rb ... t.string :restaurant_name t.string :restaurant_addr ... /app/controllers/restaurant.rb def post @res ...

htmlmysqlruby-on-rails

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

I am looking to make changes to HTML text within a UITextView. The original text was created using an HTML editor in the web version of the app and needs to be edited with a default font on iOS. Here is the simple HTML code for the text that needs editing ...

androidhtmlioscssobjective-c

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

Is there a way to create a JavaScript-driven search filter that updates automatically?

My website showcases a lineup of League of Legends champion icons, with one example shown below: <div class = "champion"> <p>Aatrox <img class = "face_left" src = "images/small/Aatrox.png"> <div class = "name" onmouseover="if(cha ...

javascriptjqueryhtmlcss

Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively. Displaying desktop view on the left and mobile view on the right side. .content{ margi ...

htmlcssresponsivecss-grid

What is the process for implementing JavaScript in Django?

I'm a newcomer to this and although I've tried searching on Google, I haven't found a solution. I'm facing an issue where I can include JavaScript within the HTML file, but it doesn't work when I try to separate it into its own fil ...

javascriptpythonhtmldjango

The height of the href is not displaying correctly when the text-decoration is disabled and it is placed next to

In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...

csshrefvertical-alignment