Wie wird der Text auf dem Desktop ausgerichtet, aber der Text wird auf kleinen Geräten zentriert?

Question

ist dieser Code, die ich benutze, aber funktioniert nicht:

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

Kann mir bitte jemand sagen, wo falsch I`m?

Answer 1

statt min-width Verwendung max-width (mit dem nicht-mobilen-Ansatz), und verwenden Sie nur text-align und nicht text-align-last, weil es nur die letzte Zeile in diesem Fall auszurichten.

sehen eine grundlegende Demo hier:

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

Wenn Sie möchten, dass Sie den mobilen Ansatz verwenden können, wie Sie, indem die min-width in Ihren Medien Abfrage verwendet haben, es so sein wird :

.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

Ändern Sie min-width in max-width, damit der Text an der Mitte ausgerichtet wird, wenn der Bildschirm weniger als 400 Pixel breit ist.