HTMLボタンを中央に配置する方法

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります。次のように、親タグに center 属性を設定します。

<html>
<本文>
 
<center><button onClick="myClick()">私を攻撃してください</button></center>
 
<スクリプト>
関数 myClick()
{
 警告("123");
}
</スクリプト>
</本文>
</html>

または:

<html>
<本文>
 
<div align="center"><button onClick="myClick()">私を攻撃してください</button></div>
 
<スクリプト>
関数 myClick()
{
 警告("123");
}
</スクリプト>
</本文>
</html>

ボタンを水平に中央揃えにする

ボタンはインライン ブロックレベル要素 display:inline-block; です。

解決策は非常に簡単で、次の 2 つの方法があります。

方法1:

 <div style="text-align:center">  
 <button>ボタン中央</button>                      
 </div>

方法2:

<div>    
<button style="display:block;margin:0 auto">ボタンを中央に配置</button>                      
</div>

HTML ボタンを中央に配置する方法についてはこれで終わりです。HTML ボタンを中央に配置する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  CSSで記事の区切り線のスタイルを実装するさまざまな方法のまとめ

>>:  誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

推薦する

nginx で複数の仮想ホストを設定する方法の例

nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...

Alibaba Cloud Centos7.X で外部にポートを開く方法

一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...

時点に基づくMySQLクイックリカバリソリューション

なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...

Windows での MySQL 5.7.18 インストール チュートリアル

この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

JavaScriptはランダムコードの生成と検証を実現する

JavaScriptでのランダムコードの生成と検証は参考までに。具体的な内容は以下のとおりです。イベ...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

Q&A: XML と HTML の違い

Q: xml と html の違いがわかりません。違いは何ですか? A: XMLと HTML の違い...

MySQL ステートメントにおける IN と Exists の比較分析

背景最近、SQL 文を書くときに、IN と Exists のどちらを選択するか迷ったので、両方の方法...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

MySQL 8.0.15 のインストールと設定のグラフィックチュートリアルと Linux でのパスワード変更

このブログは、MySQL8.0.15 を正常にインストールしたことを思い出すために書きました。以前は...

MySQL インデックス データ構造の詳細な分析

目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...

Reactにおけるフックの一般的な使用法

目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...