CSSとBootstrapで画像を中央揃えする方法を徹底解説！初心者でも安心！
2024-06-09
Twitter Bootstrap で画像を中央揃えする方法
方法 1: img-responsive クラスと center-block クラスを併用する
- 画像に
img-responsiveクラスを追加します。これは、画像がデバイスのサイズに合わせて自動的に調整されるようにします。 - 画像に
center-blockクラスを追加します。これは、画像を親要素の中央に配置します。
<div class="container">
<img src="image.jpg" class="img-responsive center-block">
</div>
方法 2: Flexbox を使用する
- 画像の親要素に
display: flexとjustify-content: centerを設定します。これは、親要素内の要素を横方向に中央揃えします。
<div class="container d-flex justify-content-center align-items-center">
<img src="image.jpg" class="img-responsive">
</div>
補足
- 上記の方法は、Bootstrap 3 と Bootstrap 4 の両方で動作します。
- 画像をレスポンシブにしない場合は、
img-responsiveクラスを省略できます。 - 親要素に
text-align: centerを設定しても画像を中央揃えできますが、この方法は非推奨です。
上記以外にも、画像を中央揃えする方法はあるので、ご自身のニーズに合わせて最適な方法を選択してください。
方法 1: img-responsive クラスと center-block クラスを併用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像中央揃え</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KA7/u8KCv15jfcQjFwa6tX0AV+z4GypGKB7qGmhFbxhglvZqP6e+5dI65yLqHSr" crossorigin="anonymous">
</head>
<body>
<div class="container">
<img src="image.jpg" class="img-responsive center-block">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
このコードは、以下の内容を実行します。
<!DOCTYPE html>、<html lang="ja">、<head>などの HTML の基本構造を定義します。- Bootstrap の CSS ファイル (
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css) を読み込みます。 <div class="container">要素を使用して、画像を含むコンテナを作成します。<img src="image.jpg" class="img-responsive center-block">要素を使用して、画像を挿入します。</div>,</body>,</html>で HTML を閉じます。
方法 2: 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KA7/u8KCv15jfcQjFwa6tX0AV+z4GyPKB7qGmhFbxhglvZqP6e+5dI65yLqHSr" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<img src="image.jpg" class="img-responsive">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
- 前の例と同様に、HTML の基本構造と Bootstrap の CSS ファイルの読み込みを行います。
<div class="container d-flex justify-content-center align-items-center">要素を使用して、Flexbox コンテナを作成します。d-flexクラスは、要素を Flexbox コンテナとして設定します。justify-content-centerクラスは、親要素内の要素
Twitter Bootstrap で画像を中央揃えするその他の方法
<div class="container text-center">
<img src="image.jpg" class="img-responsive">
</div>
この方法は、親要素に text-align: center を設定することで、その要素内のすべての要素を中央揃えにするというものです。 ただし、この方法は、画像だけでなく親要素内のすべての要素に適用されることに注意する必要があります。
方法 4: margin: auto を画像に設定する
<div class="container">
<img src="image.jpg" class="img-responsive" style="margin: auto;">
</div>
この方法は、画像に margin: auto を設定することで、左右の余白を自動的に調整し、画像を中央揃えにするというものです。 ただし、この方法は、古いバージョンの Bootstrap では動作しない場合があります。
方法 5: CSS グリッドを使用する
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<img src="image.jpg" class="img-responsive">
</div>
</div>
</div>
この方法は、CSS グリッドを使用して、画像を中央に配置する列を作成することで、画像を中央揃えにするというものです。 CSS グリッドは、より複雑なレイアウトを作成するのに役立ちますが、習得するのが難しい場合があります。
- シンプルでわかりやすい方法は、方法 1 または方法 2 です。
- 親要素内のすべての要素を中央揃えしたい場合は、方法 3 を使用します。
- 古いバージョンの Bootstrap を使用している場合は、方法 4 を使用します。
- より複雑なレイアウトを作成したい場合は、方法 5 を使用します。
css twitter-bootstrap
