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

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