Aligning text vertically within a textbox using CSS

Currently tackling a textbox with a background and wondering if there's a way to vertically center the text inside it.

Note: Text is perfectly centered in Firefox, but in IE it appears too high for some reason. Have tried adjusting line-height, padding, and margin with no success. Any suggestions?

UPDATE: Here is my current CSS. I've already attempted the margin-top method to no avail. This issue is specific to IE only, but I have separate IE style sheets to address it.

.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }

For IE, the following style is applied:

.textValue { font-size: 14px; }

Regarding the HTML structure:

            <tr>
                <td><label for="name">name</label></td>
                <td><input type="text" name="name" id="name" class="textValue" value="" /></td>
            </tr>

Thank you, Amit

htmlcsstextbox

Answer №1

Have you ever wondered how to perfectly align text in a text box? Well, I have a suggestion for you:

When dealing with pesky Internet Explorer, try using this browser-specific hack:

margin-top:50px; /* for modern browsers */
*margin-top:50px; /* for troublesome IE */
_margin-top:50px; /* for troublesome IE */

Feel free to experiment with other similar properties instead of just margin-top.

Answer №2

Have you attempted this?

input {vertical-align: middle;}

Answer №3

Although this issue may be considered outdated, I recently encountered a similar problem myself. The solution provided in this instance did not work for me, which was surprising. Upon further investigation, I discovered that the culprit was actually the line height being set to "1em". Adjusting the line height to match the height of the text box, rather than the font size it contained, resolved the issue. Interestingly, this adjustment also maintained expected functionality in browsers like Firefox.

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

Jquery plugin experiencing a malfunction

I am encountering an issue with my custom plugin as I am relatively new to this. My goal is to modify the properties of div elements on a webpage. Here is the JavaScript code I am using: (function($) { $.fn.changeDiv = function( options ) { var sett ...

javascriptjqueryhtmlcss

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

csswordpresstext

When the page is resized, the Font-Awesome icons shift position

/* icon sect*/ .social { margin-top: px; padding: 0; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); } .social li { list-style: none; float: left; margin: 0px; width: 60px; height: 10px; line-height: 60px; ...

htmlcsstwitter-bootstrap

Having trouble getting CSS3 Keyframes to function properly?

Check out the following code snippet: .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } ...

javascriptjquerycssanimationcss-animations

Animation scaling on the iPhone seems to abruptly jump away once it finishes

Encountering an issue with animations that is causing unexpected behavior on physical iPhone devices but not in the simulators. The problem arises when the background zooms in and then the div suddenly jumps to the left after the animation completes, as sh ...

cssreactjstypescriptanimationstyled-components

What is the optimal location for storing numerous blocks of text (without utilizing a database)?

If I have a control used on 10 different pages with a help icon, each page needs to display its own unique paragraph of help text. The selection of which help text to show is determined by a JavaScript function. In my scenario, having 10 paragraphs will n ...

c#htmlasp.netweb-applicationspage-lifecycle

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

phphtmljsondom

The Angular method for retrieving the child's ID when it is clicked

As a newcomer to Angular 1.0 with a background in jQuery, I am facing the following scenario: Let's imagine we have the following HTML structure : <div id="filters"> <div id="filter1">Filter 1</div> <div id="filter2"> ...

javascriptjqueryhtmlangularjs

"Exploring the Power of Perl in Harnessing Html5 Server-S

I have been working on implementing server sent events to replace ajax long polling within my application. However, I have encountered an issue with my perl script where the sleep function is causing the sending stream to be blocked. #!/opt/lampp/bin/perl ...

htmlperlsleepserver-sent-events

What could be causing this text to not center properly on mobile devices?

Here is the main content. There are no alignment commands in the CSS or HTML. Check out the jsfiddle: https://jsfiddle.net/9t4afmx3/ Any idea why it's left-aligned on mobile devices? <body> <p align="center"><img src="Screen Shot 20 ...

htmlcss

Angular Script Linking

Hello there! I am currently attempting to add an HTML tag to my response message, but for some reason it isn't working as expected. Here is a snippet of my controller code (in case the API indicates that the account doesn't exist - see this scr ...

javascripthtmlangularjs

Adjusting Image Size based on Window Width for Internet Explorer

Based on the provided code snippet <style> .x{ background: url('img.jpg') no-repeat; background-size: contain; height: 100%; } </style> <div class="x"></div> It is functioning correctly in Chrome and Firef ...

javascriptjqueryinternet-explorercss

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

javascriptjqueryhtmlhtml5-canvas

Utilizing Inline Placement within Email Templates

Seeking assistance in finding an alternative method to achieve the desired functionality in an email template. Having trouble with inline position styling being removed. table { width: 80%; border-spacing: 0; } table tr td.label-dots { positio ...

htmlcssemailhtml-emailinline

Tips for changing the color of MUI TextField in React.JS?

Is there a way to customize the color of the TextField frame? It always shows up as black, making it hard to use in dark mode. I am looking to change the color of both the label and the input line. return ( <div align="center" ...

cssreactjsmaterial-ui

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

javascripthtmlangularjsangularjs-materialmd-select

Is there a way to retrieve the dates from last month using jQuery?

Currently, I am unable to select past dates with the provided code. How can I adjust it to allow for selecting dates from previous months? let firstDay = new Date(); $('#date_filter_startmonthly').datepicker({ startDate: firstDay, endDate: ...

javascriptpythonhtmljqueryajax

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

Fading away backdrop images for the header

I've created a header class in my CSS with the following styling- header { background-image: url('../img/header-bg.jpg'); background-repeat: none; background-attachment: scroll; background-position: center center; .backg ...

javascriptjqueryhtmlcss