仅在移动设备上居中文本

Question

我对高级 CSS 还很陌生。我有一个自定义标题部分，我想使其仅以移动设备为中心。我添加了一个 class 名称和以下代码，但没有任何反应。

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

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

This为本站首页，段落如下：

REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.

Answer 1

如果您在桌面视图中签入，则您的媒体查询无法在桌面上运行。

而且您的 class 声明是错误的，请从 mobile-text 中删除 .。 :)

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

请全部使用@media 和（最大宽度：600 像素）{}

更多详情请访问here

希望对您有所帮助。 :)

Answer 2

你网站上的class是.mobile-text，应该是mobile-text - .只是用在selector中表示后面的文字是a class姓名

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

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

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

Answer 3

max-device-width 将针对整个设备区域（即设备屏幕）的宽度。而是使用 max-width，它将以整个浏览器区域的宽度为目标。

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

注：device-width查询为deprecated.

Answer 4

当我查看您页面的 html 时，我可以看到此 <h4>:

的 class=""

class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

在您的 css 中，您想使用 .mobile-text class 来操纵它。这里的问题是您使用 .mobile-text 在 html 中定义了此 class。这实际上是错误的，你需要像这样只用 mobile-text 来定义它：

class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

.实际上是class的css选择器，就像#是id的选择器。

仅在移动设备上居中文本

Centering text on mobile only

css

classname