1. ホーム
  2. html

[解決済み] htmlボタンをマイページの中央に配置したい [duplicate].

2022-09-07 14:17:43

質問

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

縦と横の両方が中央になるようにしたいのですが。今書いてあるのはこんな感じです。

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

どのように解決するのですか?

解決方法はこちらです。 JsFiddle

基本的に、ボタンはテキストが中央に配置されたdivに配置します。

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

以下のようなスタイルで

.wrapper {
    text-align: center;
}

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

猫の皮を剥ぐ方法はたくさんあるが、これはその一つに過ぎない。