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

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

ブートストラップ カルーセル キャプションを垂直方向の中央に配置し、わずかに左に配置するには、次の組み合わせを実行します。 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 サイトの他の関連記事を参照してください。