如何使文本在桌面上对齐，而在小型设备上居中对齐？

Question

this is code that I use but is not working:

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

Can someone please tell me where I`m wrong?

Answer 1

instead of min-width use max-width (using the non-mobile approach) , and just use text-align and not text-align-last because it only align the last line in that case.

see a basic demo here:

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

If you want you can use the mobile approach as you were using by keeping the min-width in your media query, it will be like this:

 .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以使文本与中心对齐。