[解決済み】カルーセルで画像を中央に配置する方法
2022-02-15 12:21:17
質問
カルーセルで画像を中央に配置する方法は? ブートストラップチュートリアルのコードを使って、ブートストラップ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%引き伸ばしたくない場合は、幅を指定し(指定しない場合はマージンを指定)、マージンを自動にしてください。
img
{
width: 50%;
margin: auto;
}
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] jQueryを使って下までスクロールさせる
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】「Missing required request header」を修正する方法。origin,x-requested-withのいずれかを指定する必要があります' Ajax Error
-
[解決済み] jQuery - 不正な呼び出し
-
[解決済み] フォーム送信のjQueryが動作しない
-
[解決済み] jQueryがfadeOutで動作しない
-
[解決済み] Bootstrapのcollapseが機能しない。ハンバーガーメニューが表示されない。
-
[解決済み] cssで自動的にシャインエフェクト
-
[解決済み] JQuery Fancyboxが動作しない
-
[解決済み] 3桁ごとの数字にカンマを追加
-
[解決済み] jQueryでborder-bottomの色を変更する?
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'ajax' を読み取ることができません。