[解決済み】bootstrapで画像を中央に配置する方法
2022-04-08 20:23:33
質問
ブートストラップ・フレームワークを使用していて、画像を水平方向に中央配置しようとしましたが、うまくいきません。
12グリッドシステムを3つのブロックに分割する等、様々なテクニックを試してみました。
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
画像をページに対して相対的に中央に配置する最も簡単な方法は何ですか?
どのように解決するのですか?
Twitter Bootstrap v3.0.3のクラスは、center-blockです。
センターコンテンツブロック
要素を表示:ブロック、マージンによる中央寄せに設定します。ミキシンおよびクラスとして利用可能。
ただ、クラスを追加する必要があります
.center-block
の中に
img
タグは、次のようになります。
<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>
Bootstrapでは、すでに.center-blockというCSSスタイルがあります。
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
からサンプルを見ることができます。 ここで
関連
-
[解決済み] アニメーションディレイが効かない
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み] SVGの塗りつぶし色が効かない
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] divを親の中で自動的に縦に重ねるにはどうしたらいいですか?
-
[解決済み] cssでこの要素を取得するには
-
[解決済み] 高さと幅はspanには適用されないのですか?
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
-
[解決済み] レスポンシブイメージアラインセンターbootstrap3
-
[解決済み】Twitter Bootstrap - 要素を水平または垂直に中心化する方法