1

このURLのテキストボックスとボタンを使用してDIVを水平方向に中央揃えするにはどうすればよいですか：http：//tinyurl.com/d4lpyh5？

よろしく、ケビン

4

3 に答える 3

1

これを試して。

<center>
<input type="text" />
</center>
于 2012-05-23T11:09:05.313 に答える
1

10 行目で、div に幅を追加する必要があります:

<div style="margin-left: auto; margin-right: auto;">

に

<div style="margin-left: auto; margin-right: auto;width: 700px;">

編集:このようにすると、入力要素の幅を代わりに固定ピクセル値に変更する必要がありますwidth: 30%;

于 2012-05-21T18:23:08.483 に答える
0

マージン左: 自動; margin-right: 残りの幅をそれらの間で半分に自動分割し、その結果、要素が中央に配置されます。それはあなたをもっと近づけますが、それがすべてではありません。（そして、残念ながら見た目は少しも変わりません。）

要素がまだ中央に配置されていないように見える理由は、要素がデフォルトでコンテナ/スクリーンの全幅であるためです。したがって、水平方向のセンタリングを機能させるには、左右の自動マージンを指定するだけでなく、さらに要素の幅を明示的に設定する必要があります。

「width: minimum-needed;」のようなものを指定できるようにしたいと考えています。そのため、内容に合わせて自動的に調整されます...しかし、CSSにはそのようなものはありません. 私が知っている唯一の方法は、要素の幅を明示的に指定することです。

たとえば、以下のコードは変更されているため、あなたが望むものを私の理解のように見えます(おそらくここに余分な <div> があり、おそらくこの情報をスタイルシートにカプセル化する必要があります...しかし、あなたはアイデアを得る) :

<html>
<head>
<title>Page</title>
<link rel="stylesheet" href="http://145.120.12.115/project/css/main.css"></link>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="top"></div>
<div class="search">
    <div style="margin-left: auto; margin-right: auto; width: 40ex;">
      <input type="text" id="q" name="q" value="" style="width: 30ex;"/>
      <input type="submit" class="blueButton button" value="Search" />
    </div>
</div>
</body>
</html>
于 2012-05-21T18:53:27.910 に答える