响应式文本对齐

Question

我遇到了文本对齐问题。我希望文本对齐响应地改变。例如，我有一个span 元素，

<span class='text'> lorem lorem lorem lorem lorem lorem lorem lorem lorem </span>

当浏览器缩小到某种程度时，我希望文本对齐方式从中心对齐更改为左对齐。我怎样才能实现它？

Answer 1

@media only screen and (max-width: 600px) {
  .text {
     text-align: left;
     // ... do your stuff here
  }
}

仅当屏幕小于 600 像素时，此 CSS 才会捕获。很确定这就是你要找的东西。

来源：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

在css下面添加。希望对你有用

span.text{
text-align: center;
display: block;
}