BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

htmlのボタン自体を中央寄せにする方法

2022-01-07 15:22:14

htmlボタン自体を中央に配置するにはどうすればよいのでしょうか？以下のように、親タグにcentering属性を設定するとよいでしょう。 

<html>
<body>
 
<center><button onClick="myClick()">hit me</button></center>
 
<script>
function myClick()
{
 alert("123");
}
</script>
</body>
</html>

または 

<html>
<body>
 
<div align="center"><button onClick="myClick()">hit me</button></div>
 
<script>
function myClick()
{
 alert("123");
}
</script>
</body>
</html>

ボタンが水平にセンタリングされている

button はインラインブロック要素 display:inline-block です。

つまり、処理は単純で、2つの方法で行うことができます。

方法1 

 <div style="text-align:center">  
 <button> button centered</button>                      
 </div>

モード2 

<div>    
<button style="display:block;margin:0 auto">button-centered</button>                      
</div>

この記事は、htmlボタン自体を中央寄せにする方法についてですが、もっと関連するhtmlボタンの中央寄せの内容は、Script Houseの過去の記事を検索するか、下記の関連記事を引き続きご覧ください、今後ともScript Houseをよろしくお願いいたします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します