ブートストラップレスポンシブレイアウト画像を中央に配置する方法

Bootstrap フレームワークは、応答性の高い Web サイト (または応答性の高い Web ページ レイアウト)、特に画像を作成するのに非常に便利です。CSS クラス .img-sensitive を使用して応答性を実現できます (画面に合わせて自動的に拡大縮小します。これを実行しましょう) ）、HTML タグを使用するのと同じように 1 行のコードが実装されるため、ロジックを考慮する必要はありません。

は次のとおりです: (推奨される学習: Bootstrap ビデオ チュートリアル )

class=”img-responsive”

レスポンシブ画像 中央に配置するにはどうすればよいですか?

画像のセンタリングは Web ページ制作でよく使用されますが、レスポンシブ画像をセンタリングするにはどうすればよいでしょうか?これも非常に簡単で、CSS クラス .center-block を使用するだけです。コードは次のとおりです。

class=”img-responsive center-block”

このコード行により、画像が応答性が高く中央に配置されます。とても簡単です!

しかし、問題は起こります!

1. ブートストラップで一般的に使用される .text-center クラスはどうですか (レスポンシブ画像を中央に配置できますか)。

答えは次のとおりです: 通常、.text-center クラスはテキストを中央に配置するために使用されますが、応答性のない画像では機能しますが、応答性の高い画像では機能しません。

2. .center-block クラスの位置を変更すると、レスポンシブ画像のセンタリングに影響しますか?

答えは「はい」です。 ＃＃＃＃＃＃＃＃＃なぜ？

あまり質問しないでください。上で赤でマークされたコードは正しい標準的なコードです。このページを中心にレスポンシブイメージのコアスキルをまとめており、Webサイト作成時に必要なときにコピーしてご利用いただけます。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル

列にアクセスして学習してください。

以上がブートストラップレスポンシブレイアウト画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。