HTMLとCSSでdiv内のボタンを中央に配置する方法を徹底解説！
2024-05-21
HTMLとCSSを使ってdiv内のボタンを中央に配置する方法
このチュートリアルでは、HTMLとCSSを使って、div要素内のボタンを中央に配置する方法を説明します。2つの主要な方法を紹介します。
方法1： display: flex を使う
この方法は、flexboxレイアウトプロパティを使用して、ボタンを中央に配置するものです。
HTML
<div class="container">
<button>ボタン</button>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
説明
.containerにdisplay: flexを設定することで、flexboxレイアウトを有効にします。justify-content: centerは、flex アイテムを水平方向に中央に配置します。
方法2： margin: auto を使う
この方法は、左右のmarginを auto に設定することで、ボタンを中央に配置する方法です。
<div class="container">
<button>ボタン</button>
</div>
.container {
text-align: center;
}
.container button {
margin: 0 auto;
}
.containerにtext-align: centerを設定することで、その中の要素を水平方向に中央に配置します。.container buttonにmargin: 0 autoを設定することで、ボタンの左右のmarginを自動的に調整し、中央に配置します。
補足
- 上記の方法は、ボタン以外にも、div内の任意の要素を中央に配置するために使用できます。
- flexboxレイアウトは、より柔軟なレイアウトを作成するために使用できるより高度な方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタン中央寄せ</title>
<style>
/* 方法1：display: flex を使う */
.container-flex {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #ccc;
}
.container-flex button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
/* 方法2：margin: auto を使う */
.container-margin {
text-align: center;
height: 200px;
background-color: #ccc;
}
.container-margin button {
margin: 0 auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>ボタン中央寄せ</h1>
<h2>方法1：display: flex を使う</h2>
<div class="container-flex">
<button>ボタン</button>
</div>
<h2>方法2：margin: auto を使う</h2>
<div class="container-margin">
<button>ボタン</button>
</div>
</body>
</html>
このコードは、以下の内容を説明しています。
- 2つの
div要素を作成します。それぞれ、container-flexとcontainer-marginというクラス名が付与されています。 - 各
div要素内に、button要素を作成します。 container-flexには、display: flex、justify-content: center、align-items: centerのCSSプロパティを設定します。これらのプロパティは、flexboxレイアウトを有効にし、ボタンを水平方向と垂直方向に中央に配置します。button要素には、共通のスタイルを設定します。
このコードを実行すると、2つのボタンが表示されます。1つ目は display: flex を使用して中央に配置され、2つ目は margin: auto を使用して中央に配置されます。
- このコードはあくまで一例です。必要に応じて、スタイルを自由にカスタマイズすることができます。
- ボタンのスタイルを変更するには、
.container-flex buttonと.container-margin buttonのセレクタを変更します。
div内のボタンを中央に配置するその他の方法
table 要素を使う
この方法は、古いブラウザとの互換性を重視する場合に有効です。
<div class="container">
<table>
<tr>
<td>
<button>ボタン</button>
</td>
</tr>
</table>
</div>
.container {
text-align: center;
}
.container table {
display: table-cell;
vertical-align: middle;
}
table要素とtd要素を使用して、ボタンを囲みます。table要素にdisplay: table-cellとvertical-align: middleを設定することで、ボタンを垂直方向に中央に配置します。
position: absolute と left: 50% を使う
この方法は、比較的新しいブラウザで使用できます。
<div class="container">
<button>ボタン</button>
</div>
.container {
position: relative;
}
.container button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.containerにposition: relativeを設定することで、ボタンを配置するための基準点を作成します。button要素にposition: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)を設定することで、ボタンを親要素の中央に配置します。
flexboxのjustify-contentとalign-itemsを使う
<div class="container">
<button>ボタン</button>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #ccc;
}
.container button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
display: flexを使って、コンテナ要素をフレックスコンテナに変換します。
grid layoutを使う
<div class="container">
<button>ボタン</button>
</div>
.container {
display: grid;
place-items: center;
height: 200px;
background-color: #ccc;
}
.container button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
<div class="container">
<button>ボタン</button>
</div>
.container {
text-align: center;
}
.container button {
margin: 0 auto;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button要素に `margin:
html css centering
