見やすく魅力的に！Bootstrap 3でレスポンシブ画像を配置しよう

2024-04-10

Bootstrap 3 でレスポンシブ画像を中央揃えする方法

方法 1: text-align: center; を使用

最も簡単な方法は、親要素に text-align: center; を設定することです。

<div class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <img src="image.jpg" class="img-responsive">
    </div>
  </div>
</div>

この方法は、すべての画面サイズで画像を中央揃えにすることができます。

方法 2: margin: 0 auto; を使用

別の方法は、画像に margin: 0 auto; を設定することです。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <img src="image.jpg" class="img-responsive" style="margin: 0 auto;">
    </div>
  </div>
</div>

この方法は、画像の左右に等しい余白を設定することで中央揃えにします。

方法 3: display: flex; を使用

さらに別の方法は、親要素に display: flex; を設定することです。

<div class="container">
  <div class="row">
    <div class="col-md-12 d-flex justify-content-center">
      <img src="image.jpg" class="img-responsive">
    </div>
  </div>
</div>

この方法は、Flexbox を使用して画像を水平方向に中央揃えにします。

方法 4: margin: auto; を使用

Bootstrap 4 以降では、margin: auto; を使用して画像を簡単に中央揃えすることができます。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <img src="image.jpg" class="img-fluid mx-auto">
    </div>
  </div>
</div>

この方法は、img-fluid クラスと mx-auto クラスを使用することで、画像を左右に等しい余白を設定し、すべての画面サイズで中央揃えにします。

これらの方法のいずれを使用しても、Bootstrap 3 でレスポンシブ画像を中央揃えすることができます。どの方法を使用するかは、プロジェクトの要件と個人的な好みによって異なります。

補足

これらの方法を組み合わせて使用することもできます。
画像の縦方向中央揃えについては、CSS の margin-top: auto; や position: absolute; などのプロパティを使用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Align Center Bootstrap 3</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-md-12">
        <h1>Responsive Image Align Center</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="image.jpg" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <img src="image.jpg" class="img-responsive" style="margin: 0 auto;">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 d-flex justify-content-center">
        <img src="image.jpg" class="img-responsive">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <img src="image.jpg" class="img-fluid mx-auto">
      </div>
    </div>
  </div>
</body>
</html>

実行方法

上記のコードを index.html などのファイル名で保存します。
同じフォルダに image.jpg という名前の画像ファイルを保存します。
ブラウザで index.html を開きます。

結果

補足

上記のコードは、Bootstrap 3 を使用しています。Bootstrap 4 以降を使用する場合は、方法 4 を使用してください。
画像のサイズや配置は、必要に応じて調整してください。

Bootstrap 3 でレスポンシブ画像を中央揃えする他の方法

方法 5: CSS Grid を使用

CSS Grid を使用すると、簡単に画像を中央揃えすることができます。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="grid-container">
        <img src="image.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

.grid-container {
  display: grid;
  place-items: center;
}

この方法は、display: grid; と place-items: center; を使用して、画像を水平方向と垂直方向に中央揃えにします。

方法 6: object-fit: contain; を使用

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <img src="image.jpg" class="img-fluid" style="object-fit: contain;">
    </div>
  </div>
</div>

この方法は、object-fit: contain; を使用して、画像を元の縦横比を維持しながら、容器内に収まるように中央揃えにします。

方法 7: position: absolute; を使用

position: absolute; を使用して、画像を中央揃えすることができます。

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="position-relative">
        <img src="image.jpg" class="img-responsive" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
      </div>
    </div>
  </div>
</div>