Bootstrap の .center-block クラスを使用して画像をページの中央に完全に配置する方法-CSSチュートリアル-php.cn

Bootstrap の .center-block クラスを使用して画像をページの中央に完全に配置する方法

Patricia Arquette

リリース： 2024-10-27 11:43:02

オリジナル

733 人が閲覧しました

How to Perfectly Center an Image on a Page Using Bootstrap's .center-block Class?

Bootstrap を使用して画像をページの中央に完全に配置する

Twitter Bootstrap を使用する場合、画像を水平方向に中央に配置するのは必ずしも簡単ではない場合があります。この記事では、ブートストラップクラス .center-block を使用して、画像をページの中央に簡単に配置するソリューションを紹介します。

.center-block クラスについて

.center-block クラスTwitter Bootstrap v3.0.3 は、ブロック要素をページの中央に配置するために特別に設計されています。表示プロパティを block に設定し、マージン (margin-left と margin-right) を auto に調整して、要素が水平方向と垂直方向の両方で中央に配置されるようにします。

.center-block

.center-block を使用して画像を中央に配置するには、行内の img タグにクラスを追加するだけです。例:

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

ログイン後にコピー

.center-block クラススタイルシートは次を定義します:

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

ログイン後にコピー

例

ライブデモンストレーションについては、次の場所にアクセスできます。サンプルページ:

[サンプルページ](URL)

.center-block クラスを利用すると、画像の中心をページに簡単に合わせることができ、視覚的に美しくバランスのとれたレイアウトを確保できます。 .

以上がBootstrap の .center-block クラスを使用して画像をページの中央に完全に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。