ブートストラップ カルーセル キャプションを垂直方向に中央揃えおよび左揃えにする方法

DDD
リリース: 2024-10-30 09:33:27
オリジナル
422 人が閲覧しました

How to Vertically Center and Left-Align a Bootstrap Carousel Caption?

ブートストラップ カルーセル キャプションの配置: 垂直方向の中央揃えと左揃え

ブートストラップ カルーセル キャプションを垂直方向の中央に配置し、わずかに左に配置するには、次の組み合わせを実行します。 CSS プロパティを実装できます。

CSS ソリューション

CSS 内に、次のスタイルを追加する必要があります:

<code class="css">.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}</code>
ログイン後にコピー

説明

  • top: 50%;: キャプションを垂直方向の中央に配置します。
  • transform: translationY(-50%);: キャプションを高さの半分だけ上に移動し、垂直方向の中央揃えになります。
  • bottom:initial;:カルーセルキャプションに適用されるデフォルトの下部パディングを削除します。
  • transform-style:preserve-3d;:ハーフピクセルに配置された要素のぼかしを防ぎます。

これらの CSS 調整により、カルーセル キャプションは垂直方向の中央に維持され、わずかに左に揃えられ、画面サイズに関係なく一貫した位置が確保されます。

以上がブートストラップ カルーセル キャプションを垂直方向に中央揃えおよび左揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!