divの中央に入力ボックスを配置します

divがあり、入力ボックスをその中心に配置します。これどうやってするの？divの中央に入力ボックスを配置します

2009-08-15 user156073

uが私たち何をしようとした動作していない種をまくことができ、HTMLで今

.center-block { margin: auto; display: block; }

を？ – TigerTiger

doctypeに移行するべきではありませんか？（http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/; http://doctype.com/）... do-do-doctypeクローズオプションがないのはなぜですか？？ – derobert

#the_div input { 
    margin: 0 auto; 
}

これが正常なIE6で動作するかどうかはわかりません。代わりにこれを行う必要があります。

/* IE 6 (probably) */ 
#the_div { 
    text-align: center; 
}

出典

2009-08-15 07:46:27

私を助けてくれてありがとう。 – user156073

パーフェクト！すべての複雑なソリューションより優れています。 –

#input_box { 
    margin: 0 auto; 
    text-align: left; 
} 
#div { 
    text-align: center; 
} 

<div id="div"> 
    <label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" /> 
</div>

か、パディングを使用してそれを行うことができ、これはアイデアのその偉大ではありません。

出典

2009-08-15 15:04:58 Tom

このウェブサイトを試してみると、物事をdivやtextに配置する方法がわかります。 Dorward

出典

2009-08-15 15:52:29

入力要素がインラインであることがキャッチです。 center：margin：0 autoに配置する前にブロック（表示：ブロック）にする必要があります。以下のコードを参照してください：

<html> 
<head> 
    <style> 
     div.wrapper { 
      width: 300px; 
      height:300px; 
      border:1px solid black; 
     } 

     input[type="text"] { 
      display: block; 
      margin : 0 auto; 
     } 

    </style> 
</head> 
<body> 

    <div class='wrapper'> 
     <input type='text' name='ok' value='ok'> 
    </div>  


</body> 
</html>

をしかし、あなたは=絶対配置されているdiv要素を持っているならば、我々は物事を少し行う必要がありdifferently.Nowこれを参照してください！

<html> 
    <head> 
    <style> 
     div.wrapper { 
      position: absolute; 
      top : 200px; 
      left: 300px; 
      width: 300px; 
      height:300px; 
      border:1px solid black; 
     } 

     input[type="text"] { 
      position: relative; 
      display: block; 
      margin : 0 auto; 
     } 

    </style> 
</head> 
<body> 

    <div class='wrapper'> 
     <input type='text' name='ok' value='ok'> 
    </div> 

</body> 
</html>

これを参考にしてください。ありがとうございます。ここで

出典

2012-08-26 07:34:36 kta

"キャッチは入力要素がインラインであることです" - これがキーです！イグスク – oak

はそれを行うためのかなり型破りな方法です：

#inputcontainer 
{ 
    display:table-cell; //display like a <td> to make the vertical-align work 
    text-align:center; //centre the input horizontally 
    vertical-align:middle; //centre the input vertically 


    width:200px; //widen the div for demo purposes 
    height:200px; //make the div taller for demo purposes 
    background:green; //change the background of the div for demo purposes 
}

それはそれを行うための最善の方法ではないかもしれない、とのマージンは動作しませんが、それは仕事をしていません。マージンを使用する必要がある場合、別の '通常の' divに表のセルとして表示されるdivをラップすることができます。

JSFiddle：http://jsfiddle.net/qw4QW/

出典

2012-08-26 08:07:05 starbeamrainbowlabs

あなただけの入力フィールドに、次のCSSを使用することができます

<div> 
    <input class="center-block"> 
</div>

出典

2017-11-07 15:23:49 Ayan

divの中央に入力ボックスを配置します

答えて

関連する問題