web-dev-qa-db-ja.com

私のページの中央にHTMLボタンを配置しようとしています

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

私はそれが垂直方向と水平方向の両方が中心になるようにしたいです。これが私が今書いたものです：

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

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

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

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

以下のスタイルで：

.wrapper {
    text-align: center;
}

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

猫の皮をむく方法はたくさんありますが、これはほんの1つです。

121
Mohamad

text-alignを使うだけで、親のdivの上にmargin:auto; display:block;を使わずにボタンをセンタリングできます。

例えば：

HTML

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

CSS

button{
  margin:auto;
  display:block;
}

対処方法を表示：CodePen

50
maudulus

display: tableが動くようにするために、物事を固定サイズにするために、私は最近margin: 0 autoを使っています。私の人生をずっと楽にしました。あなたはただ 'table'表示がtable htmlを意味しないという事実を乗り越える必要があります。

これはレスポンシブデザインのために特に役に立ちます。

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

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

enter image description here

JsFiddle

（これがインラインで2つのボタンを左右に中央に配置したい場合にも有効です。パーセンテージで試してみてください）。

18
Simon_Weaver

これを試してみてくださいそれは非常に簡単ですし、これはうまくいくはずですあなたの.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>
4
Rick Roy

ここに尋ねられた解決策はここにあります

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
4
joy oares

同じ問題を解決する方法は複数あります。 PFBふたりのうち -

位置を使用した第一の方法：fixed - position：fixed;ビューポートを基準とした位置、つまりページがスクロールされてもビューポートは常に同じ場所に留まります。左右の値を50％に加算すると、画面の中央に配置されます。

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

マージンを使った2番目の方法：auto - マージン：0 auto;水平方向のセンタリングの場合、余白はautoです。垂直方向のセンタリングのために働くことを拒否しました…これまで！しかし、実際には絶対的なセンタリングは宣言された高さとこれらのスタイルを必要とするだけです：

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
2
Maddy

私にとってはそれはflexboxを使用して働いた。

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

.parent {
    display: flex;
}

そしてボタンの使用のために：

.button {
    justify-content: center;
}

あなたは親divを使うべきです、さもなければボタンはページ/要素の真ん中が何であるかを「知りません」。

2
Roy

別の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>​

例を示します。 JsFiddle

1
Tim Withers

幅100％、高さ100％の親要素をすべて作成し、display：table;およびdisplay：table-cell;を使用します。作業サンプルを確認してください。

Working Gitのバージョン

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>
0
Ritesh Kumar