如何使文本在桌面上對齊，而在小型設備上居中對齊？

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因為在這種情況下，它僅對齊最后一行。

在此處查看基本演示：

 .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以使文本與中心對齊。