input type = "text"のテキストを縦に並べる方法は？

あります<input type="text" />入力したテキストの垂直方向の配置を設定する必要があります。たとえば、中央または上部。 http://jsfiddle.net/eSPMr/input type = "text"のテキストを縦に並べる方法は？

出典

2012-09-10 Oleg Dats

ここで - http://stackoverflow.com/a/945812/572939 – ManseUK

垂直入力はテキスト入力では機能しないため、埋め込みを使用して偽装します。

jsFiddle example

CSS

.date-input {  
    width: 145px; 
    padding-top: 80px; 
}

出典

2012-09-10 16:20:59 j08691

あなたはちょうど私もそれを打つ。 – SpaceBeers

これは最新のGoogle Chromeでは動作しません。 – pilavdzice

@Jumpei - あなたはおそらくあなたのCSSの短縮形の構文をブラッシュアップする必要があります。 3つの値が完全に有効です。 https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties – j08691

input[type=text] 
{ 
    height: 15px; 
    line-height: 15px; 
}

これは垂直中間位置を設定するための正しい方法です。

出典

2012-09-10 16:31:03

編集とupvotesのおかげで... –

代替はline-heightを使用することです： http://jsfiddle.net/DjT37/

.bigbox{ 
    height:40px; 
    line-height:40px; 
    padding:0 5px; 
}

これは、あなたが特定の高さをしたいときに、フォントサイズおよび所望の高さに基づいてパディングを計算する必要がないように、より一貫性になる傾向があります、など

出典

2012-09-10 16:34:10 Shmiddty

divタグでそれを置くことをを強制する唯一の方法のようだ：

<div style="vertical-align: middle"><div><input ... /></div></div>

がotかもしれませスパンのような彼女のタグはdivのように動作します。

出典

2013-11-05 13:32:40

私自身の問題の解決策を探しているときにこの質問が見つかりました。これまでの回答は、入力の上端または下端にテキストを表示させるためにパディングを使用したり、高さと線の高さの組み合わせを使用してテキストを垂直中央に揃えたりしていました。

ここでは、divと配置を使用してテキストを中央に表示する代わりの方法を示します。 jsfiddleをチェックしてください。

<style type="text/css"> 
    div { 
     display: inline-block; 
     height: 300px; 
     position: relative; 
     width: 500px; 
    } 

    input { 
     height: 100%; 
     position: absolute; 
     text-align: center; /* Optional */ 
     width: 100%; 
    } 
</style> 

<div> 
    <input type="text" value="Hello world!" /> 
</div>

出典

2017-09-22 20:18:41 Brogan

input type = "text"のテキストを縦に並べる方法は？

答えて

関連する問題