デスクトップ上でテキストを整列させる方法はありますが、小さなデバイスでテキストを整列する方法はありますか？

Question

これは私が使用したコードですが、動作していない：

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

誰かがどこI`mが間違った教えてくださいことはできますか？

Answer 1

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

min-width〜max-widthを変更して、画面が400ピクセル幅未満のときにテキストを中央に揃えます。