## ブートストラップ カルーセル キャプションを垂直方向および左側に配置するにはどうすればよいですか?

ブートストラップ カルーセル キャプションを垂直および左に配置する方法

ブートストラップのカルーセル キャプションは、カルーセル内で自動的に水平方向の中央に配置されるように設計されています。スライド。ただし、目的の垂直方向の配置を実現するには、いくつかの調整が必要な場合があります。

キャプションを垂直方向に中央揃えにする

キャプションを垂直方向に中央揃えにするには、transform プロパティとtranslateY プロパティを使用します。関数。次のスタイルを .carousel-caption CSS に追加します:

<code class="css">top: 50%;
transform: translateY(-50%);</code>

これにより、キャプションがコンテナの上部に固定され、中心位置になるように垂直方向に 50% オフセットされます。

下部の余分なスペースを削除する

Bootstrap のデフォルトのスタイルにより、キャプションの下に余分なスペースが追加されます。これを削除するには、.carousel-caption CSS に以下を追加します:

<code class="css">bottom: initial;</code>

ぼやけた要素の防止

transform-style をサポートしていないブラウザの場合、次のスタイルを親要素 .item に追加することをお勧めします:

<code class="css">-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;</code>

これにより、Safari および Mobile Safari で小数ピクセル位置を使用するときに要素がぼやけるのを防ぎます。

Example

<code class="css">.carousel-caption {
  color: black;
  right: 58%;
  text-align: center;
  max-width: 500px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}</code>

これらの変更を適用すると、カルーセル キャプションが垂直方向の中央に配置され、さまざまな画面サイズにわたって視覚的に安定した状態が維持されます。

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