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

【问题标题】：How to center text for slider in Mobile View?如何在移动视图中将滑块的文本居中？
【发布时间】：2018-01-23 19:19:48
【问题描述】：

我正在尝试在移动视图中将 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 的问题，并且标语偏离中心，但我会在另一篇文章中询问。

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

【问题讨论】：

标签： css text slider alignment center

【解决方案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。

【讨论】：

太棒了！这几乎完美无缺，哈哈。最高：50%；把它降低了大约 2/3 的幻灯片，所以我将它调整为 38%，现在它完全居中。我从字面上尝试了各种方式，但很松散，如果没有你的帮助，我永远不会弄明白。非常感谢。她会很兴奋的！
您的translateY 中有错字：您在( 之前添加了一个空格：translateY (-50%) 而不是translateY(-50%)。解决这个问题，50% 将完美运行。 :) 如果这解决了您的问题，您可以使用帖子左侧的复选框将其标记为已回答。这可以让其他人知道您已经找到了问题的答案。