กล่อง-align CSS3 คุณสมบัติ
ตัวอย่าง
องค์ประกอบลูกของ div ที่ใช้ทั้งกล่อง-align และคุณสมบัติกล่องแพ็คเป็นศูนย์กลาง:
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;
}
ลอง»
ในด้านล่างของหน้านี้ตัวอย่างมากขึ้น
สนับสนุนเบราว์เซอร์
ปัจจุบันเบราว์เซอร์ที่สำคัญทั้งหมดไม่สนับสนุนคุณสมบัติกล่อง-align
Internet Explorer 10 โดยทรัพย์สินส่วนตัว -MS-Flex-align สนับสนุน
Firefox โดยทรัพย์สินส่วนตัว - การสนับสนุน MOZ กล่อง-align
Safari และ Chrome โดยสถานที่การสนับสนุน -webkit กล่อง-align ส่วนตัว
หมายเหตุ: Internet Explorer 9 และรุ่นก่อนหน้าไม่สนับสนุนกล่องยืดหยุ่น IE
แอตทริบิวต์คำจำกัดความและคำแนะนำ
กล่อง box- แอตทริบิวต์ระบุวิธีการจัดองค์ประกอบของเด็กมีความสอดคล้อง
เริ่มต้น: | ยืด |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.boxAlign = "center" |
ไวยากรณ์
box-align: start|end|center|baseline|stretch;
ความคุ้มค่า | คำอธิบาย |
---|---|
เริ่มต้น | สำหรับกล่องทิศทางปกติขอบด้านบนของแต่ละองค์ประกอบของเด็กจะถูกวางไว้ที่ด้านบนของกล่อง ในกล่องด้านล่างของกรณีกลับที่ขอบด้านล่างของแต่ละองค์ประกอบย่อย |
ปลาย | สำหรับกล่องทิศทางปกติขอบด้านบนของแต่ละองค์ประกอบของเด็กจะถูกวางไว้ที่ด้านล่างของกล่อง กล่องกลับด้านล่างของแต่ละองค์ประกอบย่อยจะอยู่ที่ด้านบนของกล่อง |
ศูนย์ | พื้นที่พิเศษใด ๆ จะถูกแบ่งออกเท่า ๆ กันมากกว่าครึ่งหนึ่งขององค์ประกอบของเด็กด้านบนส่วนที่เหลือขององค์ประกอบย่อยในอีกครึ่งหนึ่ง |
พื้นฐาน | ถ้า กล่อง Orient ถูกฝังแกนเดียวหรือขวางทุกองค์ประกอบย่อยจะถูกวางไว้ในการจัดตำแหน่งพื้นฐานของพวกเขา |
ยืด | องค์ประกอบของเด็กยืดเพื่อเติมเต็มบล็อกที่มี |
ตัวอย่างออนไลน์
เปลี่ยนค่าของแนวร่วมกล่ององค์ประกอบ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้งาน JavaScript เพื่อเปลี่ยนค่าขององค์ประกอบของกล่อง-align นั้น