How to Vertically Align Text in Input Type="Text"

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



Leave a reply



Submit