如何在響應式畫面上垂直居中引導輪播標題？

實現Bootstrap 輪播標題的垂直居中

許多用戶在Bootstrap 中垂直對齊輪播標題時遇到困難，儘管他們努力水平放置它們。當標題隨著螢幕尺寸的變化而未對齊時，通常會出現此問題。這裡有一個全面的解決方案來解決這個問題。

垂直對齊的 CSS 轉換

瀏覽器對 CSS translateY 函數的支援很廣泛，包括 Internet Explorer 9。此函數允許透過沿著 y 軸平移元素來垂直對齊。將以下幾行加入您的.carousel-caption CSS 中：

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

標題的預設top 屬性設為0，但透過將其設為50% 並套用50% 的負translateY，您可以將標題居中標題從原始頂部位置向下50%。

消除額外的底部空間

要刪除預設Bootstrap 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"><!-- Start JumboCarousel -->
<div id="jumboCarousel" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators hidden-xs">
        <li data-target="#jumboCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#jumboCarousel" data-slide-to="1"></li>
        <li data-target="#jumboCarousel" data-slide-to="2"></li>
        <li data-target="#jumboCarousel" data-slide-to="3"></li>
    </ol><!-- end carousel-indicators -->

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

以上是如何在響應式畫面上垂直居中引導輪播標題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！