kotak-align CSS3 properti
contoh
Elemen anak dari div menggunakan kedua kotak-align dan properti kotak-pack berpusat:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.
Dukungan Browser
Saat ini, semua browser utama tidak mendukung properti kotak-align.
Internet Explorer 10 oleh dukungan properti -MS-flex-align swasta.
Firefox dengan milik pribadi - MOZ-box-align dukungan.
Safari dan Chrome dengan dukungan properti -webkit-box-align swasta.
Catatan: Internet Explorer 9 dan versi sebelumnya tidak mendukung IE kotak elastisitas.
Definisi atribut dan petunjuk
kotak kotak-atribut align menentukan bagaimana elemen anak selaras.
| default: | meregang |
|---|---|
| warisan: | tidak |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan .style.boxAlign = "center" |
tatabahasa
box-align: start|end|center|baseline|stretch;
| nilai | penjelasan |
|---|---|
| awal | Untuk kotak arah normal, tepi atas dari setiap elemen anak ditempatkan di bagian atas kotak. Pada kotak di bagian bawah kasus sebaliknya, tepi bawah masing-masing sub-elemen |
| akhir | Untuk kotak arah normal, tepi atas dari setiap elemen anak ditempatkan di sepanjang bagian bawah kotak. box terbalik, bagian bawah setiap sub-elemen ditempatkan di bagian atas kotak |
| pusat | Ruang tambahan dibagi secara merata, lebih dari setengah dari elemen anak di atas, sisa sub-elemen pada setengah lainnya |
| garis belakang | Jika kotak-orient tertanam uniaksial atau melintang, semua sub-elemen ditempatkan dalam keselarasan dasar mereka |
| meregang | elemen anak meregang untuk mengisi blok yang berisi |
contoh online
Mengubah nilai kotak elemen keselarasan
Contoh ini menunjukkan bagaimana menggunakan JavaScript untuk mengubah nilai unsur kotak-align.