レスポンシブ画面でブートストラップカルーセルキャプションを垂直中央に配置するにはどうすればよいですか?

ブートストラップ カルーセル キャプションの垂直方向の中央揃えの実現

多くのユーザーは、ブートストラップでカルーセル キャプションを水平方向に配置しようとしているにもかかわらず、垂直方向に配置するのが困難に直面しています。この問題は、画面サイズの変更に伴ってキャプションの位置がずれる場合によく発生します。この問題を解決する包括的な解決策は次のとおりです。

垂直方向の配置のための CSS 変換

CSS の translationY 関数のブラウザ サポートは、Internet Explorer 9 を含めて広く普及しています。この関数により、次のことが可能になります。要素を Y 軸に沿って移動することによる垂直方向の位置合わせ。次の行を .carousel-caption CSS に追加します。

top: 50%;
transform: translateY(-50%);

キャプションのデフォルトの上部プロパティは 0 に設定されていますが、これを 50% に設定し、負の translationY 50% を適用すると、キャプションが中央に配置されます。

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

デフォルトのブートストラップ CSS によって生じる余分な下部スペースを削除するには、次の行を.carousel-caption CSS:

bottom: initial;

この行は、一番下のプロパティを初期状態にリセットし、それによって余分なスペースを削除します。

ピクセルのぼかしを修正

要素が半分のピクセルに配置されている場合、ぼやけて見える場合があります。これを防ぐには、次の CSS を親要素 (この場合は .item) に適用します。

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

この設定により、ブラウザーによる要素のレンダリング方法が改善され、鮮明さが保証されます。

結果

これらの CSS 変更を実装すると、カルーセル キャプションが垂直方向の中央に配置され、さまざまな画面サイズで鮮明に表示されます。

改訂された HTML および CSS スニペット

<code class="html">&lt;!-- Start JumboCarousel --&gt;
&lt;div id=&quot;jumboCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;

    &lt;!-- Indicators --&gt;
    &lt;ol class=&quot;carousel-indicators hidden-xs&quot;&gt;
        &lt;li data-target=&quot;#jumboCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#jumboCarousel&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#jumboCarousel&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#jumboCarousel&quot; data-slide-to=&quot;3&quot;&gt;&lt;/li&gt;
    &lt;/ol&gt;&lt;!-- end carousel-indicators --&gt;

    &lt;!-- Wrapper for Slides --&gt;
    &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
        &lt;div class=&quot;item active&quot; id=&quot;slide1&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://placehold.it/1920x720&amp;amp;text=Slide+1&quot; alt=&quot;Slide 1&quot;&gt;&lt;/a&gt;
            &lt;div class=&quot;carousel-caption&quot;&gt;
                &lt;h1&gt;Check Out this Moose&lt;/h1&gt;
                &lt;p class=&quot;lead&quot;&gt;This text is super engaging and makes you want to click the button.&lt;/p&gt;
                &lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary&quot;&gt;Learn More&lt;/a&gt;
            &lt;/div&gt;&lt;!-- end carousel-caption --&gt;
        &lt;/div&gt;&lt;!-- end slide1 --&gt;
        &lt;div class=&quot;item&quot; id=&quot;slide2&quot;&gt;
            &lt;img src=&quot;http://placehold.it/1920x720&amp;amp;text=Slide+2&quot; alt=&quot;Slide 2&quot;&gt;
            &lt;div class=&quot;carousel-caption&quot;&gt;</code>

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