2

ここに示すように、幅が 20% の入力フィールドがあります。

<input id="saveServer" width="20%"  class="depth"></input>

したがって、中央に配置するには、幅が 40% の 2 つのスパン要素を入力フィールドの前後に追加して、入力フィールドを中央に配置します。あなたがここに見ることができるように：

<span style="width:40%"></span>
<input id="saveServer" width="20%"  class="depth"></input>
<span style="width:40%"></span>

しかし、どういうわけか、入力フィールドは自分自身を中心にしていません。中心に置く方法がわかりません！ドイツからのご挨拶！ありがとう！

フィドルの同じ例を次に示します: http://jsfiddle.net/bmkc2/

4

3 に答える 3

9

より多くのコンテキストが問題を明確にするのに役立つと思いますが、これはあなたが求めていることですか? 入力自体を中央に配置する 1 つの方法は、ルールを追加することです。
margin: 0 auto;

http://jsfiddle.net/QqRCm/

于 2013-02-23T21:02:20.793 に答える
8

あなたの方法に固執して、ここに実用的なフィドルがあります：http://jsfiddle.net/bmkc2/1/

  • 考慮する必要があるため、 のようなインライン要素に幅を適用することはできませんspan。たとえば、最初にインラインブロックとして表示する必要があります。
  • display: blockon input は、それを単独の行に表示します。繰り返しますが、インライン ブロックまたはフローティングです。
  • inline-block には厄介な点が 1 つあります (これは正常ですが、ここでも厄介です)。インライン ブロックとして表示される要素間に空白が表示されます。これは、各スパンと入力の間に 4px のスペースです。HTML コメントは、これらのスペースを避けるためにあります (1 つのスパンに 2 つの単語があり、それぞれがスペースで区切られていると想像するのが普通です。単語間にこのスペースが必要であり、予期しないと読めません!)
  • width: 20% と border-width: 1px と padding 5px が加算され、2x40% で 100% を超えます。box-sizing: border-boxボーダーとパディングが 20% の幅から取得されることを回避します (-moz- などを追加するプレフィックスの完全なリストについては、caniuse.com を確認してください)。

編集：

  • あなたの入力にはラベル（その属性に関連付けられてforいる）もタイトル属性もありません。それはデモだからですか？
  • margin: 0 auto別の回答で述べられているようにtext-align: center、センタリングのためだけに2つの空の要素を追加するよりも望ましいです。私はあなたの最初の試みを成功させたかっただけです。
于 2013-02-23T21:09:54.720 に答える
2

入力要素とスパン要素の両方が浮動要素であるため、コードが思うように機能しない理由があります。考えているようにそれらを機能させるには、それらをインラインブロック要素として表示する必要があります。

次のコードを追加すると、期待どおりに動作します。

span, #saveServer {
    display:inline-block;
}

jsFiddle: http://jsfiddle.net/bmkc2/2/

于 2013-02-23T21:10:33.953 に答える