Propiedad CSS text-align: panduan lengkap dengan contoh dan dukungan

Beranda » Ular sanca » Propiedad CSS text-align: panduan lengkap dengan contoh dan dukungan

Ketika Anda bekerja dengan mesin web, kontrol bagaimana mendistribusikan teks dalam satu blok adalah hal yang mendasar, dan Anda akan masuk ke dalam permainan propiedad text-align. Ini mengatur CSS untuk menentukan alineación horizontal dari konten online di dalam elemen wadah, dan ini adalah kunci untuk mengatur paragraf, judul, menu, atau judul berdasarkan tindakan dengan gaya yang koheren dan dapat dibaca.

Selain opsi klasik seperti itu meninggalkan, benar, pusat y membenarkan, hari ini dia menyampaikan nilai logika yang sesuai dengan arah teks, seperti awal, akhir o el interesante orang tua yang cocok. Varian ini memfasilitasi adaptasi internasional (LTR/RTL) dan menghindari agar Anda menuliskan kembali idiom tersebut ketika mengubah arah penulisan.

Apa itu perataan teks dan untuk apa yang Anda inginkan

Properti text-align especifica la saluran horizontal dari konten online que vive dentro de un elemento de blok (atau elemen dengan perilaku serupa). Tidak ada pusat atau desplaza el propio blok (untuk teknik lain), karena Anda mengontrol garis teks dan elemen sebaris/sebaris lainnya di bagian dalam.

En la práctica, si aplicas text-align ke a <div> atau ke <section>, mempengaruhi teks yang Anda buat apakah itu sea inline atau inline-block di dalam wadah ini: enlaces, iconos inline, imagenes con display: inline, y elementos similares. Dan tentu saja, keturunan dapat memiliki keberanian ini, jika Anda membutuhkannya, mereka dapat menguasai tingkat yang lebih rendah.

Detail yang penting adalah bahwa sebagian besar idiom yang dijelaskan oleh izquierda a derecha (LTR), keberanian karena cacat de text-align es meninggalkan. Ketika dokumen atau wadahnya berada di luar jangkauan (RTL), perilaku karena perubahan yang berubah dan garis alami pasa ser benar. Oleh karena itu, ini akan berguna untuk mengetahui nilai-nilai logis seperti itu awal y akhir.

Sintaksis dasar dan nilai-nilai yang dapat dipertanggungjawabkan

Cara penggunaannya bisa langsung: menerapkan keberanian yang diinginkan pada pemilih konten yang memuat konten alinear. Ini adalah sintaksis umum dan nilai-nilai yang lebih umum:

/* Sintaxis general */
selector {
  text-align: left | right | center | justify | start | end | match-parent | initial | inherit;
}

Nilai-nilai klasik yang ditemui dalam proyek apa pun: meninggalkan (alineación a la izquierda), benar (di sebelah kanan), pusat (centrado) dan membenarkan (márgenes alineados repartiendo espacio entre palabras). Ini adalah perluasan dan dukungan yang lebih besar por los navegadores.

Selain itu, CSS menggabungkan nilai-nilai logis dan hal-hal berikut ini sangat berguna: awal y akhir jika Anda menyesuaikan dengan LTR/RTL tanpa mengubah gaya tersebut; orang tua yang cocok menghitung garis lurus sesuai fungsi arah elemen sebenarnya dan padre; mewarisi fuerza la herencia del valor del padre; e mulanya mengembalikan keberanian ke standar yang telah ditentukan. Kami sangat menghargai fasilitasi dan pemeliharaan internasional.

Juga ada perilaku yang spesifik tetapi tidak mendukungnya di navegador sesuai dengan spesifikasinya: misalnya, kombinasi mulai akhir untuk menyelaraskan garis dasar dari mode dan pemulihan lainnya, o alinear por una cadena con una sintaxis del tipo text-align: "." start; untuk, misalnya, angka alinear dengan pemisah desimal. Ide-idenya menarik dan tidak ada implementasinya dalam praktek.

Bagaimana aplikasi ini memiliki berbagai jenis elemen

perataan teks dilakukan pada konten sebaris del contenedor (teks, blok sebaris, gambar sebaris, dll.). Jika Anda ingin memusatkan elemen sebaris, Anda dapat memutarnya dengan konten yang ada di dalamnya text-align: center;. Sebaliknya, untuk memusatkan wadah blok tersebut kebutuhan teknis lainnya (misalnya, margin: 0 auto; dengan definisi lain) atau menggunakan sistem tata letak modern seperti Flexbox atau Grid.

Jika Anda punya elemennya estrictamente inline (sebagai <span>) y quieres aplicar un text-align khususnya, meminta agar properti ini tidak diterapkan secara langsung ke dalam saluran; atau tindakan yang baik pada wadah blok Anda, atau conviertes ini sebaris dan sebaris usando algo como display: block agar Anda dapat menyelaraskan konten Anda dengan text-align.

/* Opción 1: Alinear desde el contenedor */
.contenedor {
  text-align: right;
}

/* Opción 2: Convertir el inline en bloque */
span.convertido {
  display: block;
  text-align: right;
}

Juga ingat itu Perataan teks tidak dimaksudkan untuk membuat garis vertikal linier. Untuk alur vertikal dari konten sebaris yang ada nilai de vertical-align, dan para blok atau tata letak lengkap, Flexbox o kisi son la opción preferente.

Kasus penggunaan yang sering dan contoh

Un uso muy común es la alineación de encabezados dan parrafos bagian itu. Sebagai contoh, pusatkan sebuah tituler yang bisa menjadi lebih luas secara visual, sementara sebuah bagian dibenarkan dengan sebuah tindakan dengan banyak hak di antara keduanya, baik untuk tinjauan maupun berkala. Elige según el tono del contenido and la legibilidad.

h1 {
  text-align: center;
}
.articulo p {
  text-align: justify;
}

Dalam satu bilah navigasi Anda dapat memilih pusat jika Anda ingin keseimbangan estetika dan terlihat di layar besar. Fungsinya sangat bagus di web perusahaan atau halaman arahan que buscan simetría.

.nav {
  text-align: center;
}
.nav a {
  display: inline-block;
  padding: .5rem 1rem;
}

Dalam catatan kaki es blok ciertos alinear biasa ala derecha untuk membedakan flujo utama dari teks; misalnya, data penulis, menyertakan legales atau iconos de redes. Ini kontras dengan visual jerarquías yang terpisah.

footer .meta {
  text-align: right;
}

En ajakan bertindak (CTA) terpusat, pesan ini dikirim dengan cepat dan difasilitasi dengan klik di ponsel. Anda dapat menggabungkan lampu latar dengan teks di tengah untuk membuat blok yang menahan perhatian. Pusat penyimpanan cadangan CTA.

.cta {
  text-align: center;
  background: #f5f5f5;
  padding: 1.5rem;
}

Nilai logika: awal, akhir, dan induk pertandingan

Dengan idiom LTR seperti el español atau el inglés, mulai setara dengan kiri y akhir setara dengan hak. Dalam teks RTL (rabe, ibrani), mulai dari kanan dan berakhir dari kiri. Dengan cara ini, CSS Anda akan disesuaikan secara otomatis ke arah teks sin duplicar reglas.

/* Se adapta a LTR y RTL */
.card__title {
  text-align: start;
}

.card__meta {
  text-align: end;
}

Nilainya orang tua yang cocok serupa a mewarisi, tetapi menghitung hasil yang berfungsi arah elemen sebenarnya y su padre. Ini akan berguna jika ada petunjuk arah dan kebutuhan untuk menjaga konsistensi tanpa mengorbankan nilai absolut.

Justificado: pertimbangan yang sah

Usar perataan teks: ratakan; membuat márgenes langsung dan melakukan pertukaran antar ruang. Queda muy “editorial”, tetapi Anda perlu memeriksa media online dan interletrado untuk menghindari visual “ríos”, sehingga semuanya dapat dilakukan di kolom-kolom tersebut.

.cuerpo-texto {
  text-align: justify;
  hyphens: auto; /* para mejorar saltos de línea en idiomas compatibles */
}

Ada mati implementasi: beberapa navegador, sebagai Firefox, Anda dapat menggerakkan penjelajahan Anda untuk membenarkan cara berjalan langsung ke Chrome atau Safari. Tidak ada kesalahan, hanya perbedaan motornya. Jika pembenaran itu penting untuk desain Anda, gunakanlah berbagai navigasi.

text-align-last: mengontrol baris terakhir

Ketika pembenaran atau blok alinea lengkap, Anda dapat menunjukkan minat bagaimana jika garis tersebut berada di garis terakhir de un párrafo. Ahí entra text-align-last, que admite valores como mobil, meninggalkan, benar, pusat, membenarkan, awal y akhir. Izinkan memperbaiki kerusakan pada bagian tersebut.

.parrafo {
  text-align: justify;
  text-align-last: center; /* la última línea se centra */
}

Nilainya mobil suele justificar dan alinear a la izquierda en konteksos LTR, sementara itu awal y akhir sesuaikan arah teks. Ini adalah cara terakhir untuk mengendalikan proses bagian tersebut tapi baju monyet la estética umum.

Arahan teks dan kombinasi dengan unicode-bidi

Properti direction mendefinisikan dirección de escritura di dalamnya terdapat elemen: LTR atau RTL. Kombinasi dengan unicode-bidi Anda mungkin forzar o anidar direcciones dalam teks dengan beberapa idiom. Ini terutama berguna dalam antarmuka multibahasa atau ketika dimasukkan ke dalam bahasa Arab di dalam bahasa Spanyol.

.bloque-rtl {
  direction: rtl;           /* establece escritura derecha a izquierda */
  unicode-bidi: embed;      /* ajusta el comportamiento de anidado */
  text-align: start;        /* se alineará a la derecha en RTL */
}

Gabungkan arah dengan nilai logika perataan teks ahorra condicionales dan hojas alternativas. Mesinnya terlihat lebih kuat dari perubahan idiom.

Garis vertikal: perataan vertikal dan alternatif

Tidak ada yang membingungkan konsep: perataan teks solo alinea en horizontal. Para vertical, CSS ofrece vertical-align en el contexto de konten sebaris dan sel pada tabla. Tidak ada tuan untuk memusatkan blok sepenuhnya, tetapi untuk menyesuaikan garis dasar atau lokasi relatif vertikal.

Nilai dari vertical-align yang dapat Anda gunakan: paduk (bawaan), di bawah, super, puncak, teks-atas, tengah, dasar, teks-bawah, Plus bujur dan persentase untuk deplazar sehubungan dengan basis online. Ini dapat digunakan untuk ikon sebaris, super, atau tab.

• paduk: alinea dengan garis dasar padre.
• di bawah / super: simulan subíndices dan superíndices.
• puncak / dasar: jika sejajar dengan elemen lebih tinggi/lebih rendah dari garis.
• teks-atas / teks-bawah: se alinean con la parte alta/baja de la fuente del padre.
• tengah: kira-kira tepat di atas x-height; sampai berguna dengan ikon.
• bujur/%: ajusta desplazamientos finos.

Para centrar verticalmente blok lengkap, es más eficaz usar Flexbox o Kotak CSS. Ini adalah sistem yang dirancang untuk tata letak dan menghidupkan kembali hal-hal tersebut dengan cara yang memungkinkan en cualquier viewport.

.centro-vertical {
  display: flex;
  align-items: center;   /* centrado vertical */
  justify-content: center; /* opcional: centrado horizontal */
}

Herencia, alcance dan bagaimana sobrescribirnya

Los elementos hijos suelen perataan teks heredar del contenedor. Si en un <div> pones text-align: center;, semua bagiannya dan sebaris juga berada di tengah. Para romper esa herencia, membangun keberanian yang istimewa dalam elemen ini.

.padre {
  text-align: center;
}
.padre .hijo {
  text-align: left; /* sobrescribe la herencia */
}

dengan penggabung dan pemilih walikota tertentu Anda dapat menyesuaikan garis-garis tersebut secara nyata: misalnya, garis lurus ke bawah hanya elemen terakhir dari daftar di tengah blok. Kontrolnya akan masuk jika digabungkan dengan memilih dengan benar.

.lista {
  text-align: center;
}
.lista li:last-child {
  text-align: right;
}

Pertanyaan media responsif dan responsif

Es habitual cambiar alineación según el ancho de pantalla: terpusat di ponsel untuk memudahkan pengajaran dan panggilan, lalu dimasukkan ke dalam penulisan untuk gaya yang lebih tradisional. Dengan pertanyaan media, otomatisasi dilakukan tanpa duplikat HTML.

.cabecera {
  text-align: center;
}
@media (min-width: 768px) {
  .cabecera {
    text-align: left;
  }
}

Anda juga dapat memusatkan judul dan tombol dalam tampilan kecil dan warna mulai/akhir dan tata letak RTL/LTR tanpa membuka CSS ketika mengubah idiom. Kami menghargai logika sebisa mungkin untuk mengurangi pemeliharaan.

Tabla de propiedades relacionadas

Properti ini biasanya digunakan ketika Anda bekerja dengan garis dan arah teks. Bantuan pemerintah dapat membangun sistem yang kokoh:

Properti	deskripsi
arah	Tentukan arah penulisan (LTR/RTL).
text-align	Kontrol garis horizontal konten sebaris.
perataan teks terakhir	Alinea khususnya adalah garis terakhir dari sebuah gambar.
unicode-bidi	Gerakan seperti itu akan terjadi dan membuka kembali arah teks yang ada.
perataan vertikal	Sesuaikan garis vertikal dan horizontal.

Gabungkan dengan baik dan izinkan penyelesainya selesai antarmuka multibahasa yang lengkap memiliki detail tipografi yang sangat akurat pada kartu, tab, atau komponen yang dapat digunakan kembali. Planifica valores por defeto dan excepciones con cabeza.

Compatibilidad de navegadores

Properti perataan teks dengan dukungan yang lebih besar dari versi awal di navigasi modern, sehingga dapat digunakan dengan tenang dalam proyek produksi. Nilai-nilai operan klasik tanpa masalah praktis di semua bagian.

• Google Chrome: 1.0
• Internet Explorer: 3.0
• Microsoft Tepi: 12.0
• firefox: 1.0
• opera: 3.5
• Safari: 1.0

Ingat itu los matices de justificado dapat bervariasi antara mesin (misalnya, Firefox dari Chrome/Safari). Jika pengaturannya tepat dan kritis, validasi hasil visual pada tujuan navigasi.

Contoh cepat nilai-nilai tradisional

Izquierda (karena cacat dan LTR): alineación natural untuk sebagian besar idiom occidentales. Berguna untuk membaca commoda dan patrones de escaneo yang terlihat.

p.izquierda {
  text-align: left;
}

Baik: berguna untuk metadata, firma, fecha, dan blok sekunder. Ciptakan kontras dengan isi utama.

p.derecha {
  text-align: right;
}

Dipusatkan: ideal untuk judul, CTA, atau blok singkatnya donde se busca foco visual inmediato. Pastikan ukuran besarnya dapat dibaca.

.cta-titulo {
  text-align: center;
}

Dibenarkan: estética de columna editorial con bordes rectos. Menggabungkan partisi palabras ketika melakukan prosedur.

.columna {
  text-align: justify;
}

Praktik baik dan rekomendasi

No abuses del justificado en columnas muy estrechas, karena dapat menimbulkan kesalahan yang tidak teratur. La legibilidad es prioritaria. Sesuaikan garis lurus dan, jika memungkinkan, gunakan panduan otomatis.

Cuando maquetes en entornos multibahasa, memprioritaskan awal y akhir untuk beradaptasi tanpa menggunakan CSS untuk mengubah idiom tersebut. Te ahorra hojas duplicadas dan mengurangi kesalahan.

Si un inline no responde a text-align como esperas, lihat tampilan wadahnya. Seringkali masalah tersebut terselesaikan menerapkan propiedad pada blok tersebut o mengubah tampilan elemen.

Dalam komponen yang lengkap dengan berbagai kapasitas, dokumen jadi jangan atur alineación “base” dan jangan biarkan pengecualian. Jerarquía clara evita sobrescrituras innecesarias y estilos frágiles.

Batasan, kelangkaan, dan masa depan spesifikasi

Spesifikasinya memikirkan ide-ide seperti itu alinearkan jalur pertama ke restoran con una notación compuesta (mulai akhir), Atau alinear por una cadena (misalnya, text-align: "." start;) untuk kolom angka dengan pemisah desimal. Hoy por hoy no cuentan con soporte practico di navegadores, tapi apuntan a casos de useo reales en tablas and listados.

Ingat perataan teks tidak akan memulihkan garis vertikal atau pusat blok yang tepat. Para eso, usa perataan vertikal (dalam konteksnya), Flexbox atau Grid. Separar responsabilidades ini sangat membuat frustrasi dan hasil yang tidak konsisten.

Mengenai kompatibilitas, nilai-nilai tradisional sudah ada soporte muy sólido. Di dibenarkan, kendaraan bermotor dapat berbeda dalam jawaban espacios; validasi jika branding Anda benar-benar homogen. La experiencia real del usuario manda.

Demostrasi cepat dengan HTML dan CSS

Gunakan langsung di pusat judul: un clásico que funciona judul para pahlawan dan blok destacados.

<h1 class="titulo">Alineación con text-align</h1>
<style>
  .titulo { text-align: center; }
</style>

Konten yang berpusat pada konten sebaris dan bagian yang dibenarkan: kombinasi yang sering dalam artikel.

<div class="intro">
  <p>Este es un párrafo de introducción con márgenes pulidos.</p>
</div>
<style>
  .intro { text-align: center; }
  .intro p { text-align: justify; }
</style>

aplicar perataan teks terakhir untuk menghentikan cierre del párrafo: kendalikan tanpa harus menjaga konten.

<p class="cierre">La última línea quedará centrada, resaltando el final.</p>
<style>
  .cierre {
    text-align: justify;
    text-align-last: center;
  }
</style>

Ejemplo con valores lógicos mulai/akhir que se adaptan a LTR/RTL: ideal para productos globales.

<div class="tarjeta">
  <h3 class="tarjeta__titulo">Título de tarjeta</h3>
  <p class="tarjeta__texto">Texto descriptivo del contenido.</p>
</div>
<style>
  .tarjeta__titulo { text-align: start; }
  .tarjeta__texto  { text-align: end; }
</style>

Dan jika Anda membutuhkan alineación vertikal en linea (por ejemplo, icono y texto): sejajarkan vertikal ke dalam kotak.

<span class="icono">★</span> <span class="label">Favorito</span>
<style>
  .icono { vertical-align: middle; }
  .label { vertical-align: middle; }
</style>

Dalam skenario daftar artikel, Anda dapat menyelaraskan metadata ke judul dan judul mulai dengan nilai logis. Jerarquía visual queda clara dan Anda menyesuaikannya dengan arah teks.

.post__title { text-align: start; }
.post__meta  { text-align: end; }

Jika Anda menggunakan file rak tarjetas, terpusat pada tingkat konten dengan text-align dan atur sistem tata letak (Grid/Flex) pada bagian khusus. Pisahkan tanggung jawab dan hindari konflik.

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { text-align: center; padding: 1rem; border: 1px solid #e5e5e5; }

Por último, si quieres que semua tubuh di sini ada garis lurus yang cacat, dapat diterapkan pada tingkat yang lebih tinggi dan menyesuaikan pengecualian pada komponen beton. Sepuluh bagian berisi teks yang tidak dipusatkan sehingga harus dimasukkan ke dalam inisiasi untuk diakses.

body { text-align: left; }
.header, .hero { text-align: center; }

La clave con text-align itu berarti bahwa Anda menggunakan konten yang ada di dalam wadah, memilih keberanian yang tepat untuk idiom dan perangkat, dan menggabungkannya dengan propiedade dengan baik seperti perataan teks terakhir, arah y perataan vertikal ketika situasi yang Anda perlukan. Dengan jeda ini, hasil yang dicatat konsisten, terbaca, dan pemeliharaan mudah.