Bootstrap 3の垂直配置を使いこなして、レイアウトをもっと自由に！

2024-04-02

垂直方向の配置ユーティリティクラス

Bootstrap 3 には、垂直方向の配置を制御するためのユーティリティクラスが用意されています。

.align-top: 要素を垂直方向の上部に配置します。

これらのクラスは、要素に直接適用できます。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="align-top">
        上部に配置された要素
      </div>
    </div>
  </div>
</div>

margin プロパティを使用して、要素の上下に余白を追加することで、垂直方向の配置を制御することもできます。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div style="margin-top: 10px;">
        上部に余白を追加した要素
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div style="position: relative; top: 50%; transform: translateY(-50%);">
        垂直方向の中央に配置された要素
      </div>
    </div>
  </div>
</div>

Flexbox

Bootstrap 3 は Flexbox をサポートしているので、Flexbox を使用して垂直方向の配置を制御することもできます。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="d-flex flex-column justify-content-center">
        垂直方向の中央に配置された要素
      </div>
    </div>
  </div>
</div>

Bootstrap 3 で垂直方向の配置を制御するには、いくつかの方法があります。どの方法を使用するかは、状況によって異なります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向の配置</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="align-top">
          上部に配置された要素
        </div>
        <div class="align-middle">
          垂直方向の中央に配置された要素
        </div>
        <div class="align-bottom">
          下部に配置された要素
        </div>
      </div>
    </div>
  </div>
</body>
</html>

margin プロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向の配置</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div style="margin-top: 10px;">
          上部に余白を追加した要素
        </div>
      </div>
    </div>
  </div>
</body>
</html>

position プロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向の配置</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div style="position: relative; top: 50%; transform: translateY(-50%);">
          垂直方向の中央に配置された要素
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Flexbox

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直方向の配置</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="d-flex flex-column justify-content-center">
          垂直方向の中央に配置された要素
        </div>
      </div>
    </div>
  </div>
</body>
</html>

これらのサンプルコードは、Bootstrap 3 で垂直方向の配置を制御する方法を

Bootstrap 3 で垂直方向の配置を制御するその他の方法

text-align プロパティ

テキスト要素の垂直方向の配置を制御するには、text-align プロパティを使用できます。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 class="text-top">
        上部に配置された見出し
      </h1>
      <h1 class="text-middle">
        垂直方向の中央に配置された見出し
      </h1>
      <h1 class="text-bottom">
        下部に配置された見出し
      </h1>
    </div>
  </div>
</div>

line-height プロパティ

行の高さを調整することで、テキスト要素の垂直方向の配置を間接的に制御できます。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1 style="line-height: 100px;">
        垂直方向の中央に配置された見出し
      </h1>
    </div>
  </div>
</div>