實現(xiàn)Bootstrap 輪播標(biāo)題的垂直居中

許多用戶在Bootstrap 中垂直對齊輪播標(biāo)題時遇到困難，儘管他們努力水平放置它們。當(dāng)標(biāo)題隨著螢?zāi)怀叽绲淖兓磳R時，通常會出現(xiàn)此問題。這裡有一個全面的解決方案來解決這個問題。

垂直對齊的 CSS 轉(zhuǎn)換

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

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

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

消除額外的底部空間

要刪除預(yù)設(shè)Bootstrap CSS 造成的額外底部空間，請在您的檔案中包含以下行.carousel-caption CSS：

bottom: initial;

此行將底部屬性重設(shè)為其初始狀態(tài)，從而消除多餘的空間。

修正像素模糊

如果元素放置在半個像素上，它們可能會顯得模糊。為了防止這種情況，請將以下 CSS 應(yīng)用於父元素，在本例中為 .item:

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

此設(shè)定改進了瀏覽器渲染元素的方式，確保清晰度。

結(jié)果

實作這些 CSS 變更將使您的輪播標(biāo)題垂直居中，並使它們在各種螢?zāi)怀叽缟巷@得清晰。

修訂的 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>

以上是如何在響應(yīng)式畫面上垂直居中引導(dǎo)輪播標(biāo)題？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！