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

Question

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

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

有人能告诉我哪里错了吗？

Answer 1

使用max-width而不是min-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>

Answer 2

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