如何在桌面上左对齐文本但在小型设备上文本居中对齐？

Question

这是我使用但不起作用的代码：

.test-one {
    text-align-last: left
}
@media screen and (min-width: 400px) {
    .test-one {
        text-align: center;
    }
}

谁能告诉我哪里错了？

Answer 1

将 min-width 更改为 max-width 以在屏幕宽度小于 400px 时使文本居中对齐。

Answer 2

而不是 min-width 使用 max-width（使用非移动方法），并且只使用 text-align 而不是 text-align-last 因为它只对齐最后一行那种情况。

在此处查看基本演示：

.test-one {
  text-align: left
}
@media screen and (max-width: 480px) {
  .test-one {
    text-align: center;
  }
}

<div class="test-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a finibus mauris. Vestibulum pellentesque libero eget rutrum pellentesque. Aenean sit amet ullamcorper erat, quis egestas ex. Nulla non suscipit enim, at pretium nisl. Donec euismod dolor
  ante, id vulputate tortor sagittis ut. Praesent ullamcorper justo et tortor venenatis, tempor efficitur nunc aliquet. In bibendum, magna sed pretium pellentesque, sem justo porttitor risus, vitae dapibus urna lectus non massa. Suspendisse eleifend condimentum
  urna, eu elementum libero ullamcorper mattis. In rhoncus maximus nulla, sed faucibus est venenatis et. Nulla tincidunt cursus libero. Quisque viverra neque vitae ligula placerat, ac ornare felis luctus. Donec et orci ac tellus scelerisque rutrum. Donec
  at condimentum est. Cras elementum massa et odio ultrices scelerisque.</div>

如果您愿意，可以通过在媒体查询中保留 min-width 来使用移动方法，就像这样：

.test-one {
  text-align: center
}
@media screen and (min-width: 480px) {
  .test-one {
    text-align: left;
  }
}

<div class="test-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a finibus mauris. Vestibulum pellentesque libero eget rutrum pellentesque. Aenean sit amet ullamcorper erat, quis egestas ex. Nulla non suscipit enim, at pretium nisl. Donec euismod dolor
  ante, id vulputate tortor sagittis ut. Praesent ullamcorper justo et tortor venenatis, tempor efficitur nunc aliquet. In bibendum, magna sed pretium pellentesque, sem justo porttitor risus, vitae dapibus urna lectus non massa. Suspendisse eleifend condimentum
  urna, eu elementum libero ullamcorper mattis. In rhoncus maximus nulla, sed faucibus est venenatis et. Nulla tincidunt cursus libero. Quisque viverra neque vitae ligula placerat, ac ornare felis luctus. Donec et orci ac tellus scelerisque rutrum. Donec
  at condimentum est. Cras elementum massa et odio ultrices scelerisque.</div>

如何在桌面上左对齐文本但在小型设备上文本居中对齐？

How to left text align on desktop but text align center on small devices?

html

css

media-queries