Question

我正在尝试将移动视图中的Customizr Pro主题滑块中的文本居中。我更喜欢主题中内置的偏移版本，下面是透明覆盖，但女士希望她网站上的所有内容都居中。我不是专业开发人员，但提供了我的帮助，因为她最初只想要一个基本网站。

我在这里尝试使用代码来解决这个问题，这个代码类似于我之前使用过的CSS，但它没有用到：

How to align middle/center box with text in slider with responsive in mobile view ??

这就是我用来居中文本的内容，这在桌面视图中看起来很好，但移动设备根本没有显示：

.carousel-caption {
    max-width: 100% !important;
    padding: 0 !important;
    line-height: 14px !important;
    position: absolute !important;
    margin-left: unset !important;
    text-align: center !important;
    top: 175px !important;
    left: 0 !important;
    right: 0 !important;
}

网站为https://designerbackdrops.com

我还有另外一个与Safari有关的问题，并且标语偏离中心，但我会在另一个帖子中询问。

感谢您提供的任何建议。我会尝试任何事情！

Answer 1

这是一个流行的CSS技巧，用于集中事物。我在你的网站上试过它，它适用于桌面和移动设备。

.carousel-caption {
    max-width: 100% !important;
    padding: 0 !important;
    line-height: 14px !important;
    position: absolute !important;
    margin-left: unset !important;
    text-align: center !important;
    top: 50%;
    left: 0 !important;
    right: 0 !important;
    bottom: auto;
    transform: translateY(-50%);
}

基本上，将这两者结合使用应该使对象居中：

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

我还添加了bottom: auto;来覆盖另一个样式表tc_common.min.css。

如何在移动视图中居中滑块文本？

1 个答案: