How to vertically align text in input type=text?
Use padding to fake it since vertical-align doesn't work on text inputs.
jsFiddle example
CSS
.date-input {
width: 145px;
padding-top: 80px;
}
How to vertically top-align the text in a INPUT text element?
If you want to have only input element and achieve this, then set padding-bottom and not height.
Once you set height, by default the text will be shown in the middle of the element.
input {
padding-bottom: 462px;
background-color:lightgreen;
}
http://jsfiddle.net/yf5f82vx/1/
CSS vertical-align text input field with adjacent text
The default setting for vertical-align is indeed "baseline", and it also works that way in your example. What you are forgetting is that the baseline alignment doesn't align the bottom borderline of the input box, but the baseline of the text that is inside that box. If you write something in there, you'll see it. (BTW, it's the same if you create a div with a border and text inside it.)
In the following snippet (which is almost identical to your code except that the alignment is not defined , i.e. default, i.e. "baseline") I added a value
text to the input tag, so here you see the baseline alignment.
h1,
form,
div.search {
display: inline;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Heading</h1>
<form>
<div class="search">
<input type="text" id="search_string" value="here's some text" />
<input type="radio" id="option" />
<label for="option">Some option</label>
</div>
</form>
</body>
</html>
Error css: vertical align in td with input text and image
Add vertical-align: middle
to .campoOpcional input
and it works - see demo below:
.campoOpcional input { vertical-align: middle;}
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;"> <tr> <td class="cabeceraDG">Origen</td> <td class="cabeceraDG">Centro</td> <td class="cabeceraDG">Usuario</td> </tr> <tr style="white-space:nowrap;"> <td class="campoOpcional">oficina</td> <td class="campoOpcional" align="center" style="width:150px;"> <input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" /> <input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();" style="border-width:0px;" /> </td> <td class="campoOpcional">TEST</td> </tr></table>
Vertical alignment is off on date type input
On Safari iOS 8.3 and Bootstrap 3, it worked for me with this:
<input type="date" style="vertical-align:bottom;">
Input placeholder vertical align
You forgot to add this css
to input
element:
input[type='text']{
font-size: 30px;
color: rgba(255, 255, 255, 0.4);
line-height: 30px;
}
Here is the fiddle: fiddle link
Vertically align text within input field of fixed-height without display: table or padding?
In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.
<div style="line-height: 60px; height: 60px; border: 1px solid black;">
<input type="text" value="foo" />
</div>
(imagine an   after the input-statement)
IE 7 ignores every CSS hack I tried.
I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.
Related Topics
Browsers Try to Download HTML File Instead of Opening
How to Remove Specific Text With CSS
Html Select Only One Checkbox in a Group
Html/Css - Make Alert Disappear After a Few Seconds
How to Disable a Text Area or Mat-Form-Field
How to Set Maximum Height for Table-Cell
How to Make an Element Width: 100% Minus Padding
How to Overlay One Div Over Another Div
How to Add Some Non-Standard Font to a Website
How to Remove the White-Space Created by an Image
How to Display Multiple Lines of Text in Svg
Loading Images from External Folder to Component Angular 2
Why Not Use Tables For Layout in Html
When Flexbox Items Wrap in Column Mode, Container Does Not Grow Its Width