【保存版】Twitter Bootstrap 3でボタンを中央に配置！3つの方法とサンプルコード

2024-06-25

Twitter Bootstrap 3 でボタンを中央に配置する方法

方法 1: .text-center クラスを使う

最も簡単な方法は、ボタンを配置するコンテナに .text-center クラスを追加することです。このクラスは、そのコンテナ内のすべての要素を水平方向に中央揃えにします。

<div class="text-center">
  <button class="btn btn-primary">ボタン</button>
</div>

方法 2: .btn-group クラスと .btn-centered クラスを使う

.btn-group クラスは、複数のボタンをグループ化するのに役立ちます。.btn-centered クラスをこのグループ内のボタンに適用すると、そのボタンをグループ内で水平方向に中央揃えできます。

<div class="btn-group">
  <button class="btn btn-default">左ボタン</button>
  <button class="btn btn-primary btn-centered">中央ボタン</button>
  <button class="btn btn-default">右ボタン</button>
</div>

方法 3: Flexbox を使う

Flexbox は、Web ページの要素を柔軟にレイアウトするためのレイアウトモードです。Bootstrap 3 には Flexbox ユーティリティが含まれているので、ボタンを中央に配置するために使用できます。

<div class="d-flex justify-content-center">
  <button class="btn btn-primary">ボタン</button>
</div>

方法 4: CSS グリッドを使う

CSS グリッドは、Web ページのレイアウトをグリッドシステムを使用して作成するもう 1 つの方法です。Bootstrap 3 には CSS グリッドユーティリティも含まれているので、ボタンを中央に配置するために使用できます。

<div class="row">
  <div class="col-md-12 text-center">
    <button class="btn btn-primary">ボタン</button>
  </div>
</div>

補足

上記以外にも、ボタンを中央に配置する方法はいくつかあります。
使用する方法は、プロジェクトの要件と個人的な好みによって異なります。
Bootstrap のドキュメントには、Flexbox や CSS グリッドなど、ここで説明した機能の詳細情報が含まれています。

方法 1: .text-center クラスを使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンを中央に配置</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LjnuZ9ai9Z55Q5l121zkK24w7/J7xqm9yOzvIDnmrV4cZiHCFY4z5t5fV4s" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="text-center">
      <button class="btn btn-primary">ボタン</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5l1QvBRT6d/wXzQvM0vMKL1gQ9YdUiQSx7c6R1vTA56vV9sm8gXz5nCr20xV8" crossorigin="anonymous"></script>
</body>
</html>

方法 2: .btn-group クラスと .btn-centered クラスを使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンを中央に配置</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LjnuZ9ai9Z55Q5l121zkK24w7/J7xqm9yOzvIDnmrV4cZiHCFY4z5t5fV4s" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="btn-group">
      <button class="btn btn-default">左ボタン</button>
      <button class="btn btn-primary btn-centered">中央ボタン</button>
      <button class="btn btn-default">右ボタン</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5l1QvBRT6d/wXzQvM0vMKL1gQ9YdUiQSx7c6R1vTA56vV9sm8gXz5nCr20xV8" crossorigin="anonymous"></script>
</body>
</html>

方法 3: Flexbox を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタンを中央に配置</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LjnuZ9ai9Z55Q5l121zkK24w7/J7xqm9yOzvIDnmrV4cZiHCFY4z5t5fV4s" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="d-flex justify-content-center">
      <button class="btn btn-primary">ボタン</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5l1QvBRT6d/wXzQvM0vMKL1gQ9YdUiQSx7c6R1vTA56vV9sm8gXz5nCr20xV8" crossorigin="anonymous"></script>
</body>
</html>

Twitter Bootstrap 3 でボタンを中央に配置するその他の方法

方法 5: margin: auto を使う

この方法は、ボタンの周囲に等しいマージンを設定することで、ボタンを水平方向に中央揃えにします。

<button class="btn btn-primary" style="margin: auto;">ボタン</button>

方法 6: text-align: center を使う

<div style="text-align: center;">
  <button class="btn btn-primary">ボタン</button>
</div>

方法 7: テーブルレイアウトを使う

この方法は、ボタンを <table> 要素内に配置し、<table> 要素と <td> 要素に適切な CSS プロパティを設定することで、ボタンを水平方向に中央揃えにします。

<table>
  <tr>
    <td style="text-align: center;">
      <button class="btn btn-primary">ボタン</button>
    </td>
  </tr>
</table>

この方法は、JavaScript を使用して、ボタンの位置を動的に調整することで、ボタンを水平方向に中央揃えにします。

<button class="btn btn-primary" id="myButton">ボタン</button>

<script>
  var button = document.getElementById('myButton');
  button.style.marginLeft = (window.innerWidth - button.offsetWidth) / 2 + 'px';
</script>