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

Question

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

我尝试在此处使用此答案的代码，该代码与我已经在使用的 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: 175px !important;
    left: 0 !important;
    right: 0 !important;
}

网站是https://designerbackdrops.com

我还有一个关于 Safari 和标语偏离中心的问题，但我会在另一个 post.

中询问这个问题

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

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。

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

How to center text for slider in Mobile View?

css

text

center

slider

alignment