Question

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

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

有人可以告诉我我哪里错了吗？

Answer 1

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

在此处查看基本演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您希望通过在媒体查询中保留min-width，可以像使用移动方法一样使用移动方法，它将是这样的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将min-width更改为max-width，使文字在屏幕宽度小于400像素时与中心对齐。

如何在桌面上保持文本对齐但文本在小型设备上对齐？

2 个答案: