Bootstrap で画像を垂直方向の中央に配置するにはどうすればよいですか?

Bootstrap で画像を垂直方向の中央に配置する方法

Bootstrap で画像を水平方向の中央に配置することは、さまざまな方法で実現できます。

方法 1: Center-Block クラスを使用する

Twitter Bootstrap v3.0.3 では、この目的のために center-block クラスが導入されています。要素を表示するように設定します: block およびマージンを介して中央に配置します。

このメソッドを使用するには:

1. クラス center-block を img タグに追加します:

<code class="html"><img class="center-block" src="logo.png" /></code>

方法 2: グリッド システムを使用する

または、ブートストラップ グリッド システムを使用して、行を 3 つの等しいブロックに分割することもできます。

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

このメソッドは、画像を行内で水平方向にも中央に配置します。

画像を垂直方向にも中央に配置するには、さらに CSS を使用して、画像がインラインブロックを表示するように設定し、マージントップを等しく指定することができます。画像の高さの半分まで:

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

以上がBootstrap で画像を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。