Bagaimana untuk Mencapai Penjajaran yang Betul Apabila Memusing Teks dalam CSS?

Memutar Teks dalam CSS untuk Penjajaran Menegak

Satu cabaran biasa yang dihadapi apabila memutar teks dalam CSS ialah mengekalkan penjajaran teks dan sekitarnya elemen. Untuk menangani perkara ini, mari kita terokai isu ini dan berikan penyelesaian.

HTML dan CSS yang disediakan dalam soalan menunjukkan percubaan untuk memutar teks secara menegak dengan menggunakan putaran -90 darjah pada kelas .rotateObj .title . Walau bagaimanapun, ini menyebabkan salah jajaran dan memecahkan susunan elemen yang dimaksudkan.

Salah jajaran berlaku kerana putaran mengganggu aliran semula jadi teks. Apabila teks diputar 90 darjah, ia menjadi menegak dan menempati ruang yang berbeza berhubung dengan elemen sekelilingnya. Untuk mengatasinya, kita perlu mengambil kira perubahan dalam orientasi dan melaraskan elemen lain dengan sewajarnya.

Satu pendekatan yang berkesan ialah menggunakan sifat transformasi untuk memutar teks. Transform membolehkan kita memanipulasi elemen dalam pelbagai cara, termasuk putaran. Dengan menggunakan putaran transformasi -90 darjah pada kelas .rotateObj .title, kita boleh mencapai penjajaran menegak yang diingini.

<code class="css">.rotateObj .title {
    transform: rotate(-90deg);
}</code>

Walau bagaimanapun, memutar teks sahaja mungkin tidak mencukupi. Dalam kes khusus anda, isu dengan penjajaran timbul daripada div kandungan yang diapungkan. Apabila elemen terapung, ia dikeluarkan daripada aliran biasa dokumen. Ini bermakna ketinggian div kandungan tidak akan dikira dengan betul apabila teks di dalamnya diputar.

Untuk menyelesaikan masalah ini, anda boleh mengalih keluar sifat apungan daripada kelas .rotateObj .content, membenarkannya mengikut aliran normal dokumen dan menyesuaikan diri dengan teks yang diputar.

<code class="css">.rotateObj .content {
    float: none;
    width: 600px;
    height: 100%;
    padding: 20px;
}</code>

Dengan menggabungkan putaran transformasi dan mengalih keluar sifat apungan, anda boleh berjaya memutar teks secara menegak sambil mengekalkan penjajaran dan kedudukan elemen yang betul.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penjajaran yang Betul Apabila Memusing Teks dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!