html - 仅在移动设备上居中对齐文本

Question

我希望文本仅在移动设备上居中对齐。在桌面上，文本应右对齐。

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
  .centerMobileOnly {
    text-align: center !important;
  }
}

@media only screen and (min-device-width: 600px) {
  .rightDesktopOnly {
    text-align: right !important;
  }
}

<div>
  <h3 class="rightDesktopOnly centerMobileOnly">02:00</h3>
</div>

Answer 1

你不必为媒体 css 添加两个类，你可以只通过一个。

.centerMobileOnly{
  text-align: right;
}
@media (max-device-width: 800px) {
  .centerMobileOnly {
    text-align: center;
  }
}

<div>
  <h3 class="centerMobileOnly">02:00</h3>
</div>