[解決済み] カルーセルで画像を中央に配置する方法
2022-02-01 23:25:58
質問
カルーセルで画像を中央に配置する方法は? ブートストラップチュートリアルのコードを使って、ブートストラップ3のカルーセルを試してみました。
<a href="/Webconte/Details/124">
<img src="/Webconte/Image/124" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/123">
<img src="/Webconte/Image/123" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/105">
<img src="/Webconte/Image/105" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/95">
<img src="/Webconte/Image/95" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/107">
<img src="/Webconte/Image/107" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/100">
<img src="/Webconte/Image/100" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/98">
<img src="/Webconte/Image/98" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/78">
<img src="/Webconte/Image/78" />
</a>
</div>
<div class="item ">
<a href="/Webconte/Details/11">
<img src="/Webconte/Image/11" />
</a>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
ワイド画面では、カルーセルの画像は左寄せになり、画像の右側に醜い空白ができます。 カルーセルをもっときれいにするには?画像を中央寄せにしたり、他の解決策はありますか?
解決方法は?
次の2つの選択肢があります。
- カルーセル全体に画像を表示させたい場合
img
{
width: 100%;
height: auto;
}
- 画像を100%引き伸ばしたくない場合は、幅を指定し(指定しない場合はmarginを指定)、margin autoを指定してください。
img
{
width: 50%;
margin: auto;
}
関連
-
[解決済み】BootstrapがUncaught Errorを投げる。BootstrapのJavaScriptはjQueryを必要とする【解決済み
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JSONパースエラー シンタックスエラー 予期せぬ入力の終了
-
[解決済み] Foundation Revealモーダルjavascriptを開く方法
-
[解決済み] jQuery が Ajax 呼び出しの終了を待って戻るようにするにはどうすればよいですか?
-
[解決済み] ユーザーがDIVの外側をクリックしたときに、jQueryを使用してDIVを非表示にする
-
[解決済み] AJAXを同期させる(SJAX)にはどうすればよいか
-
[解決済み] Bootstrapのcollapseが機能しない。ハンバーガーメニューが表示されない。
-
[解決済み] jquery autocomplete が動作しない
-
[解決済み] jQueryを使って下までスクロールさせる
-
[解決済み] jqueryでアンカークリックをシミュレートするにはどうしたらいいですか?
-
[解決済み] jquery .text()または.html()が動作しない