Bootstrap で画像を水平方向に簡単に中央に配置するにはどうすればよいですか?

Bootstrap を使用して画像を水平に配置する: The Elusive Center

Web 開発の領域では、多くの人が直面する共通の課題は次のタスクです。信頼性の低い技術に頼ることなく、画像を水平方向に中央に配置します。人気の Bootstrap フレームワークを使用している場合は、この謎めいた問題に対する簡単な解決策があることを知って安心するでしょう。

Bootstrap のセンター ブロックの素晴らしさを体験してください

Bootstrap バージョン 3.0.3 では、「center-block」という適切な名前のクラスが導入されており、画像を中央に配置するというジレンマを、わずかなコード行で簡単に解決します。この独創的なクラスは、単に CSS プロパティを追加するだけです:

display: block;
margin-left: auto;
margin-right: auto;

以下に示すように、このクラスをイメージ タグに組み込むことで、目的の水平方向の中央揃え効果を実現できます。

<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>

center-block クラスの便利さは、マージンを自動的に調整して、画像の幅に関係なく完全に中央に配置される機能にあります。もう頭痛はありません！あなたの画像は、新たなバランス感覚で Web ページを飾ります。

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