仅在移动设备上将文本居中

Question

我对高级 CSS 还很陌生。我有一个自定义标题部分，我想仅以移动设备为中心。我添加了类名和以下代码，但什么也没发生。

.mobile-text {
  text-align: right;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

这是这个网站的主页，段落如下：

挑战规范并提高期望的房地产。这是黑白世界中的多彩思维。

Answer 1

您在网站上的类是.mobile-text，而且应该是mobile-text-.只在选择器中使用，表示以下文本是类名

另外，元素 ( style=font-size: 35px... etc) 上的内联样式会覆盖您的更改 - 您可以用来!important延迟处理此问题

.mobile-text {
  text-align: right !important;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center !important;
  }
}