1

私はすでにこれについていくつかの検索をしました、そしてそれは私を狂わせました：

  • 「 CENTER＆MIDDLE THIS 」というテキストを、次のtextareaように下と下の領域の中央に配置する必要があります.input。

ここに画像の説明を入力してください

コード： http： //jsfiddle.net/qhoc/zqYUJ/2/

今のところ、下と下の中間に並んでいるようinput1ですinput

条件：

  1. 私たちは.input1 input身長が30px
  2. 高さを指定したくないのですが、指定する必要textareaがある場合は、あまり理想的ではありませんが、問題ありません。
  3. .input高さと幅はすでにコードで指定されています。
  4. また、jQueryを使用したくない。textarea後で、テキストの量に応じてjQueryによって高さが変わる可能性があるため、ピクセル位置を「ハードコード」するのも好きではありません。

助けていただければ幸いです!!!

4

4 に答える 4

2

使ってみてくださいdispaly:table-cell

.input {
    height:300px;
    width: 400px;
    border: 1px solid black; display:table
}
.input1 input {
    width: 100%;
    height: 30px;     
}
.input2 textarea {
    width: 100%;    
}
.input3 {
    width: 100%;
    height:100%; display:table-row;
    text-align:center;     
}
.input3 div {
    display:table-cell; 
    vertical-align:middle;
    margin:auto 0
}

デモ

于 2013-01-25T09:15:01.437 に答える
1

更新されたフィドルをチェックしてください：設定leftしてtop フィドルするだけです

于 2013-01-25T09:06:41.267 に答える
0

'.input3div'スタイルを次のように変更するだけです。それは役立つかもしれません...

  .input3 div {
     text-align: center;
     background: red;
     top: 50%;
     margin: 80px;
 }
于 2013-01-25T09:06:29.207 に答える
0

あなたの場合、それは次のようになります。

top: 50%;
left:27%;

http://jsfiddle.net/zqYUJ/43/embedded/result/

于 2013-01-25T09:17:17.467 に答える