Center align the label and textbox using CSS in a horizontal arrangement

Is there a way to center the label text within the div?

My desired outcome is:


       -----------
Name: |  textbox  |
       -----------

For a demo, check out this code: http://jsfiddle.net/53ALd/2053/

Answer №1

For the task at hand, the code snippet below will work perfectly:

label, textarea {
  vertical-align: middle;
}

Answer №2

I believe this solution will be beneficial for you. Modify the code snippet:

HTML:

<table>
  <tr>
    <td><label for='name'>Name:</label></td>
    <td><textarea type='text' id='name'></textarea></td>
  </tr>
</table>

CSS:

td {
  border-right: 1px solid #F1F1F1;
  border-top: 1px solid #F1F1F1;
  border-bottom: 1px solid #F1F1F1;
  border-left: 0px solid #F1F1F1;
  padding: 2px;
  margin: 0;
  vertical-align: middle;
}

See Demo

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

Semi-Transparent Photo Slideshow

Currently, I am in the process of developing a Pokedex-like feature for a project that I am working on. The functionality is working as expected, but there is one particular feature that I would like to implement. My goal is to display only certain element ...

Changing the text link color on IOS can be achieved by modifying the CSS properties

Recently, I encountered an issue with the text link color of my website. While I had set the link color to red for desktop view, it inexplicably changed to blue when viewed on an iPhone. Even after trying to use !important, the problem persisted. Can som ...

Switching background images for DIVs when links are rolled over

Having trouble changing the background image of a div when a user hovers over a link. Any ideas on what might be causing this issue? <style> #divToSwap { background-image: url(black.jpg); height: 150px; width: 150px; } </style> &l ...

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

Animate hovering over a specific element within a group of similar elements using jQuery

Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hove ...

Preserving data and retrieving it

I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...

What is the best way to decrease the size of a SELECT element in Bootstrap 3?

Is there a way to combine form-control and input-mini classes in order to create a SELECT element with a width of around 60px and a height of approximately 20px? <select id="RoleSelect" class="form-control input-mini { width: 60px; }" runat="server"> ...

Display issues with React styled components preventing proper rendering on the screen

Having issues with my style components displaying in a web application I'm developing using React and Ruby on Rails. Everything was working fine until I added a third style component, now even after removing it, nothing shows up on the screen after ru ...

What is the best way to create two fields side by side within a single row?

I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written: import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik' import * as yup ...

Tips for positioning the bootstrap navbar correctly inside a container

I am having some trouble with my HTML page layout. I have a fixed Bootstrap navbar and a container with a width of 1000px. I'm trying to place the navbar inside the container, but it's not working as expected. The navbar is still taking up the fu ...

Leveraging the power of angular's $asyncValidators by implementing a cache

I've created a validation directive that verifies a value against an endpoint App.directive('validate', function(fooService, $q) { return { restrict: "A", require: "ngModel", link: function(scope, elem, attrs, ngModel) { ...

steps for converting .SCSS files to .CSS in a project template

As a beginner developer, my expertise lies in HTML/CSS/JS and some fundamentals of their frameworks. Recently, I invested in this Template from template monster for a specific project () WHAT I NEED - My goal is to modify the primary theme color of the t ...

The charset is failing to function properly when using the French language

Encountering an issue with the French language on a website I'm currently developing ... Specifically, there are menu bars, tabs, and text within each tab involved. Upon setting charset=ISO-8859-1, the body text functions correctly, but the menu bar ...

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Imagine I am using app.js or a Bootstrap CDN link for all of my HTML pages, but I don't want to include it in every single page individually. Is there a way to create an index.html file that includes this so that all other HTML pages load the head fro ...

Bootstrap columns causing a collision

My website has a problem when viewed on mobile at 320 x 480 resolution. Two columns filled with text collide and mash up the text together. I initially tried without using columns, just "container-clearfix," but that did not resolve the issue. Check out t ...

Exploring the functionalities of radio buttons and arrays in a Javascript experiment

Currently delving into the world of Javascript and struggling to wrap my head around creating a test using only pure Javascript (no jQuery). The goal is to: Present users with a question and provide radio button options for selection. Allow users to cho ...

Refresh the Google Maps location using GPS coordinates

Currently, I am working with an Arduino that has a GPS chip and processing NMEA strings with Python. I have an HTML file set to auto-refresh every x seconds to update the marker's position. However, I would like to update the position information with ...

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

Opt for CSS (or JavaScript) over SMIL for better styling and animation control

I recently noticed an alert in my Chrome console that SVG's SMIL animations are being deprecated and will soon be removed. The message suggested using CSS or Web animations instead. Since I want to transition from SMIL to CSS animations, there are a ...