如何在响应式屏幕上垂直居中引导轮播标题？

实现 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中文网其他相关文章！