Tips on how to align text vertically within an @Html.TextAreaFor

Is there a way to vertically center text in a @Html.TextAreaFor?

Below is the HTML code:

<table class="width100percent padding0Margin0">
            <tr class="height35">
                <td class="width150">
                    Description
                </td>
                <td class="textValignMiddle">
                    @Html.TextAreaFor(m => m.Job.Description, new { @class = "width646 height25", @placeholder = "Enter " + @Model.GetNameJob + " description" })
                </td>
            </tr>
        </table>

I have tried various CSS styles to align the text vertically but haven't achieved the desired result.

.textBottom{vertical-align: text-bottom;}
.textTop{vertical-align:text-top;}
.textVerticalAlignTop{vertical-align:top;}
.textBaseLine{vertical-align:baseline; }
.textValignBottom{vertical-align:bottom;}
.textValignMiddle {vertical-align: middle;}

Could adding padding-top and adjusting the size of the textbox be the only solution for this issue?

htmlcssrazor

Answer №1

To achieve vertical alignment in CSS, one can use the following code snippet:

.textValignMiddle 
{
vertical-align:middle;
display: table-cell;
float: none;
}

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

Eliminate border-radius property from Bootstrap 4 breadcrumb using Sass styling

Within Bootstrap 4, there exists a Sass variable known as $enable-rounded which "Enables predefined border-radius styles on various components." (https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options) I need to eliminate the rounded ...

csssassbootstrap-4

An issue occurred when attempting to click on an element within the <li> tag nested inside the <ul> tag

Here is the HTML Code: <li class="dropdown span pull-right username"> <a href="#" id="username">…….</a> <!-- Unauthenticated : This content will only be shown to unauthenticated users--> ...

pythonhtmlseleniumselenium-webdrivercss-selectors

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

Having trouble locating an element on a webpage? When inspecting the element, are you noticing that the HTML code differs from the source page?

I'm having trouble locating a specific element on a webpage. When I use the Inspect Element tool, I can see the HTML code with the element id = username, but when I check the page source, all I see is JavaScript code. Does anyone have any suggestions ...

javascriptpythonhtmlselenium-webdriver

Is there a way for me to insert PHP code into a file that has been generated by PHP?

I have encountered an issue where PHP files seem to convert all PHP code into emptiness. Despite creating a PHP file, adding PHP and HTML code to it, and then closing it, the code does not appear as expected in the file. I attempted a solution which is det ...

phphtmlfopenfwritefgets

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

htmlcss

Vertically align all items within the div using Bootstrap to achieve perfect centering

I've been working on centering everything within this div vertically, and I've encountered some challenges along the way. Initially, I ensured that my background view extends my container nicely across the screen. Now, I'm looking to create ...

htmlcsstwitter-bootstrapsassbootstrap-4

What methods can users employ to effectively manage and maintain their in-app purchases using my application?

Hey there, I could really use some assistance. Recently, I created a mobile app for a client that allows users to purchase and watch video courses. However, I'm facing an issue where when a user buys a course and then refreshes the app, they are redir ...

javascriptjqueryhtml

Changing the background color of a button

In the HEADER section, there are 4 buttons (B1, B2, B3, B4), each leading to a different page in the same tab. The background color of the buttons is set to WHITE. When a specific button is clicked, the entire page reloads and redirects to the correspond ...

javascriptjqueryhtmlcss

Using JavaScript to inject PHP variables into multiple <span> elements

I have been searching for a similar query without any luck. Currently, I am attempting to display the number of Twitter/Facebook/RSS followers within a <span>....</span> in my sidebar. To retrieve the follower counts, I am using some PHP scrip ...

phpjqueryhtml

Issues arise when Angular animations fail to function properly due to the addition of styles through the [ng

Exploring Angular animations and seeking advice. Currently, I am utilizing ngStyle to show or hide text on hover. The goal is to smoothly animate the text as it appears on the screen. Are there alternative methods to achieve the same hover effect without r ...

htmlangular

Creating a PDF file from JSON data and enabling file download in a web application with React and JavaScript

Could you provide guidance on how to convert json data into a pdf file without using any library? Here's an example of the json data I'd like to convert; {"employees":[ {"firstName":"John", "lastName":& ...

javascripthtmlreactjstypescriptreact-hooks

Incorporate some flair into the Twitter iframe with a Style tag

I have been attempting to add a style tag into the head of an embedded Twitter timeline in order to customize some of the styling. I wrote the CSS and added it within a style tag. My initial idea was to inject this into the iframe using jQuery, but unfortu ...

jquerycsstwitter

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

Alter the color of several buttons with each subsequent click using jQuery

How can I change the button color after clicking it? I have a single button that will change to red on the first click, yellow on the second click, green on the third click, and then become disabled after three clicks. function updateBtnColor() { $ ...

javascriptjqueryhtmlcss

Executing a JavaScript function using document.write()

When I try to click on the SWF part1 links within the document.write() function in order to call the openswf function, nothing happens. Here is my code: <html> <a href="#" onclick="Popup();">show popup</a> <script> functio ...

javascripthtml

Exception thrown when AngularJS encounters a function that is not defined

Hello everyone, I'm currently facing an issue with an Angular project. My project consists of an HTML page with the following JavaScript code within the head tags: var app = angular.module('App', []); app.controller = ('Data', fun ...

javascripthtmlangularjsarraysjson

When the ajax response comes in, my javascript code seems to suddenly stop

After sending a POST request, my JavaScript suddenly stops working for some unknown reason. Here's the situation: I visit my webpage, fill out the form, and then click 'Click me' : Upon clicking OK in the alert popup, I see the expected ou ...

javascriptcssajax

Troubles with Fixed Navigation Bar in JavaScript-Enabled Scrolling

I've implemented a JavaScript-enabled scrolling navigation bar that starts below a hero graphic and then sticks to the top when it reaches the top of the page. The functionality works as intended, but there is one issue - when the navigation bar reach ...

javascriptcssscrollfixednavbar

Having trouble with an onClick function not working on a .php webpage?

I recently developed a simple JavaScript script that dynamically loads an image based on user input in a text field (e.g., entering 'brick1' loads brick1.jpg). Although this works fine on a regular HTML page, I faced issues triggering the onClick ...

javascriptphpjqueryhtml