115

使用しているブラウザに関係なく、HTMLボタンをページの中央に正確に配置しようとしています。垂直方向の中央にあるときに左に浮いているか、ページの上部などのページのどこかにあります。

縦にも横にも中央に配置したい。これが私が今書いたものです：

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>
4

9 に答える 9

170

これがあなたの解決策です：JsFiddle

基本的に、テキストを中央揃えにしてボタンを div に配置します。

<div class="wrapper">
    <button class="button">Button</button>
</div>

次のスタイルで:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

猫の皮を剥く方法はたくさんありますが、これはその 1 つにすぎません。

于 2012-08-03T15:56:43.650 に答える
78

単純に使用するだけで、親buttonに使用せずにa を中央に配置できますtext-aligndivmargin:auto; display:block;

例えば：

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}

実際に見てみましょう: CodePen

于 2015-09-26T00:00:54.193 に答える
23

著者による編集:これは本当に時代遅れの回答です! フレックスボックスまたはグリッドの方がはるかに優れています。

私は最近、作業display: tableを可能にするなど、固定サイズを与えることに本当にmargin: 0 auto取り組んでいます。私の人生をずっと楽にしてくれました。「テーブル」表示がテーブル html を意味しないという事実を乗り越える必要があるだけです。

これは、物事が毛むくじゃらでクレイジーになるレスポンシブ デザインに特に役立ちます。

style
{
   display: table;
   margin: 0 auto
}

Jsフィドル

さらに、2 つのボタンがあり、それらを同じ幅にしたい場合、同じ幅にするためにそれぞれのサイズを知る必要さえありません。テーブルが魔法のようにそれらを折りたたむからです。

ここに画像の説明を入力

Jsフィドル

(これは、それらがインラインで、2 つのボタンを左右に中央揃えにしたい場合にも機能します - パーセンテージでそれを試してみてください!)。

于 2014-07-30T07:30:04.647 に答える
10

これを試してみてください。これは非常に簡単で、.cssファイルに変更を加えることはできません。これは機能するはずです

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
于 2012-08-03T16:20:28.150 に答える
5

私にとっては、フレックスボックスを使用して機能しました。

親の div / 要素の周りに css クラスを追加します。

.parent {
    display: flex;
}

ボタンの使用について：

.button {
    justify-content: center;
}

親divを使用する必要があります。そうしないと、ボタンはページ/要素の中央が何であるかを「認識」しません。

于 2017-11-01T11:45:34.807 に答える
1

別の div 内に配置し、CSS を使用してボタンを中央に移動します。

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button> 
</div>​

以下に例を示します。

于 2012-08-03T15:57:55.587 に答える