[解決済み】div内のボタンを中央に配置する方法は?
2022-04-17 16:53:40
質問
幅が100%のdivがあります。
ボタンを中央に配置したいのですが、どうすればよいでしょうか?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>
解決方法は?
回答を更新しました
アクティブな回答であることに気づいたので更新しますが、現在ではFlexboxが正しいアプローチでしょう。
縦・横の整列。
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
水平方向のみ(主なフレックス軸が水平である限り、デフォルト)。
#wrapper {
display: flex;
justify-content: center;
}
フレックスボックスなしの固定幅を使用したオリジナルアンサー
もし元の投稿者が垂直方向と中央揃えにしたいのであれば、ボタンの幅と高さを固定にするのはとても簡単です。
CSS
button{
height:20px;
width:100px;
margin: -20px -50px;
position:relative;
top:50%;
left:50%;
}
を使用すると、水平方向のアライメントを調整することができます。
button{
margin: 0 auto;
}
または
div{
text-align:center;
}
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] HTMLのバックスペース
-
[解決済み] 3つのDiv(左/中央/右)を別のDivの中に配置するにはどうすればよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] コンテナの幅に応じたフォントの拡大縮小
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] 背景画像を前後にパンするCSS【非公開
-
[解決済み] SRCとHREFの違い
-
[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか?
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] TD rowspan が機能しない
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?