CSS - marginauto; - มันทำงานอย่างไร

การใช้ margin: อัตโนมัติ การจัดวางองค์ประกอบบล็อกในแนวนอนเป็นศูนย์กลางเป็นเทคนิคที่รู้จักกันดี แต่คุณเคยสงสัยบ้างไหมว่าทำไมหรือได้ผลอย่างไร ในการตอบคำถามนี้ก่อนอื่นเราต้องมาดูวิธีการทำงานของ margin: auto นอกจากนี้ในการผสมคืออะไร รถยนต์ อาจทำในระยะขอบถ้ามันใช้งานได้สำหรับการจัดกึ่งกลางแนวตั้งและปัญหาอื่น ๆ.

แต่แรก, อะไรนะ รถยนต์ ทำจริง?

ความหมายของ รถยนต์ แตกต่างกันไปด้วย องค์ประกอบ, ประเภทองค์ประกอบ และ บริบท. ในระยะขอบ, รถยนต์ อาจหมายถึงหนึ่งในสองสิ่ง: ใช้พื้นที่ว่างหรือ 0 px ทั้งสองจะ กำหนดเค้าโครงที่แตกต่างกันสำหรับองค์ประกอบ.

"auto" สละพื้นที่ว่าง

นี่คือการใช้มาร์จิ้นโดยทั่วไป รถยนต์ เราเจอกันบ่อยครั้ง โดยการมอบหมาย รถยนต์ ไปทางซ้ายและขวาขององค์ประกอบพวกเขาใช้พื้นที่แนวนอนที่มีอยู่ในภาชนะขององค์ประกอบอย่างเท่าเทียมกัน - และองค์ประกอบจึงเป็นศูนย์กลาง.

อย่างไรก็ตามสิ่งนี้จะใช้ได้กับระยะขอบแนวนอนเท่านั้น (เพิ่มเติมใน ทำไม ในภายหลัง) และมันยัง จะไม่ทำงานกับการลอย และ องค์ประกอบแบบอินไลน์ และด้วยตัวมันเอง ไม่สามารถทำงานได้ ใน แน่นอน และ องค์ประกอบตำแหน่งคงที่ (อย่างไรก็ตามเราจะดูวิธีการทำงานเหล่านั้น).

มารยาทลอยโดยการใช้พื้นที่ว่าง

ตั้งแต่ รถยนต์ ในระยะขอบซ้ายและขวาใช้พื้นที่ "ว่าง" เท่า ๆ กันคุณคิดว่าจะเกิดอะไรขึ้นเมื่อมูลค่า รถยนต์ มอบให้กับหนึ่งในนั้นเท่านั้น?

ระยะขอบซ้ายหรือขวาด้วย รถยนต์ จะใช้พื้นที่ทั้งหมด "พร้อมใช้งาน" ทำให้องค์ประกอบดูเหมือนว่าล้างไปทางซ้ายหรือขวา.

“รถยนต์” คำนวณเป็น 0px

ดังที่ได้กล่าวมาก่อน, รถยนต์ จะไม่ทำงานในองค์ประกอบที่ลอยอยู่แบบอินไลน์และแบบสัมบูรณ์ องค์ประกอบทั้งหมดเหล่านี้มีอยู่แล้ว ตัดสินใจเกี่ยวกับรูปแบบของพวกเขา, ดังนั้นจึงไม่มีประโยชน์ในการใช้ รถยนต์ สำหรับระยะขอบและคาดหวังว่าจะได้รับการเป็นศูนย์กลางเช่นเดียวกับที่.

ที่จะเอาชนะวัตถุประสงค์เริ่มต้นของการใช้สิ่งที่ชอบ ลอย. ด้วยเหตุนี้ รถยนต์ จะมีค่า 0px ในองค์ประกอบเหล่านั้น.

รถยนต์ จะไม่ทำงานกับองค์ประกอบบล็อกทั่วไปหากมันไม่มีความกว้าง ตัวอย่างทั้งหมดที่ฉันแสดงให้คุณเห็นนั้นมีความกว้าง.

ความกว้างของค่า รถยนต์ จะมี 0px อัตรากำไรขั้นต้น. โดยทั่วไปความกว้างขององค์ประกอบบล็อกจะครอบคลุมถึงคอนเทนเนอร์เมื่อเป็น รถยนต์ หรือ 100% และด้วยเหตุนี้อัตรากำไรขั้นต้น รถยนต์ จะถูกคำนวณเป็น 0px ในกรณีเช่นนี้.

สิ่งที่เกิดขึ้นกับระยะขอบในแนวตั้งด้วยมูลค่า รถยนต์?

รถยนต์ ในระยะขอบทั้งบนและล่างถูกคำนวณเป็น 0px เสมอ (ยกเว้นองค์ประกอบที่แน่นอน) ข้อมูลจำเพาะของ W3C บอกว่ามันเป็นอย่างนี้:

“ถ้า “ขอบด้านบน” หรือ “ขอบล่าง” คือ “รถยนต์”, ค่าที่ใช้คือ 0 "

สาเหตุที่ดีจนถึงตอนนี้เป็นเรื่องลึกลับ อาจเป็นเพราะการไหลของหน้าในแนวดิ่งทั่วไป ขนาดหน้าเพิ่มความสูงฉลาด. ดังนั้นการจัดองค์ประกอบให้อยู่กึ่งกลางในแนวตั้งในคอนเทนเนอร์จะไม่ทำให้มันอยู่กึ่งกลางเมื่อเทียบกับหน้าตัวเองซึ่งแตกต่างจากเมื่อทำในแนวนอน (ในกรณีส่วนใหญ่).

และอาจเป็นเพราะเหตุผลเดียวกันนี้พวกเขาตัดสินใจเพิ่มข้อยกเว้นสำหรับองค์ประกอบแบบสัมบูรณ์ซึ่งสามารถจัดกึ่งกลางแนวตั้งตามความสูงของหน้าทั้งหมด.

อาจเป็นเพราะเอฟเฟกต์การยุบขอบ (การยุบขององค์ประกอบที่อยู่ติดกัน” ระยะขอบ) ซึ่งเป็นข้อยกเว้นอื่นสำหรับระยะขอบแนวตั้ง.

อย่างไรก็ตามหลังดูเหมือนจะเป็นกรณีที่ไม่น่า - เนื่องจากองค์ประกอบที่ไม่ยุบระยะขอบของพวกเขา - เหมือนลอยและองค์ประกอบ ล้น นอกเหนือจากนี้ มองเห็นได้, ยังคงกำหนดระยะขอบแนวตั้ง 0px สำหรับ รถยนต์.

การจัดองค์ประกอบองค์ประกอบให้อยู่กึ่งกลาง

เนื่องจากมีข้อยกเว้นสำหรับองค์ประกอบที่มีตำแหน่งแน่นอนเรา”จะใช้ รถยนต์ ค่าไปยังศูนย์หนึ่งในแนวตั้งและแนวนอน แต่ก่อนหน้านั้นเราต้องรู้ว่าเมื่อไร margin: อัตโนมัติ ใช้งานได้จริงเหมือนที่เราต้องการในองค์ประกอบที่มีตำแหน่งแน่นอน.

นี่คือที่มาของสเป็ค W3C อื่น:

"ถ้าทั้งสาม “ซ้าย”, “ความกว้าง”, และ “ขวา” เป็น “รถยนต์”: ชุดแรกใด ๆ “รถยนต์” ค่าสำหรับ “ขอบซ้าย” และ “ขอบขวา” เป็น 0 ... "

"ถ้าไม่มีสามอย่างนี้ “รถยนต์”: ถ้าทั้งคู่ “ขอบซ้าย” และ “ขอบขวา” เป็น “รถยนต์”, แก้สมการภายใต้ข้อ จำกัด พิเศษที่ระยะขอบทั้งสองได้รับค่าเท่ากัน "

ที่สวยมากบอกว่าสำหรับ ตามแนวนอน รถยนต์ อัตรากำไรขั้นต้น เพื่อยึดช่องว่างที่เท่ากัน, ค่าสำหรับ ซ้าย, ความกว้าง และ ขวา ไม่ควรจะเป็น รถยนต์ , ค่าเริ่มต้นของพวกเขา ดังนั้นสิ่งที่เราต้องทำคือการให้คุณค่ากับพวกเขาในองค์ประกอบที่มีตำแหน่งแน่นอน. ซ้าย และ ขวา ควรมี ค่าที่เท่าเทียมกันสำหรับการอยู่ตรงกลางที่สมบูรณ์แบบ.

ข้อมูลจำเพาะยังกล่าวถึงสิ่งที่คล้ายกันสำหรับระยะขอบแนวตั้ง.

“ถ้าทั้งสาม “ด้านบน”, “ความสูง”, และ “ด้านล่าง” เป็นอัตโนมัติตั้งค่า “ด้านบน” ไปยังตำแหน่งคงที่ ... ”

“หากไม่มีสามในนั้น “รถยนต์”: ถ้าทั้งคู่ “ขอบด้านบน” และ “ขอบล่าง” เป็น “รถยนต์”, แก้สมการภายใต้ข้อ จำกัด พิเศษที่ระยะขอบทั้งสองได้รับค่าเท่ากัน ... ”

ดังนั้นสำหรับองค์ประกอบที่แน่นอนที่จะ ศูนย์กลางในแนวตั้ง, ของมัน ด้านบน, ความสูง, และ ด้านล่าง ค่าไม่ควรเป็น รถยนต์.

ตอนนี้ด้วยการรวมสิ่งเหล่านี้เข้าด้วยกัน”จะได้รับ:

ข้อสรุป

หากคุณต้องการล้างองค์ประกอบในหน้าของคุณไปทางขวาหรือซ้ายโดยไม่ต้องห่อองค์ประกอบต่อไปนี้ (เช่นเกิดอะไรขึ้นกับโฟลต) จำไว้ว่ามีตัวเลือกให้ใช้ รถยนต์ สำหรับกำไร.

การแปลงองค์ประกอบให้เป็นสัมบูรณ์เพียงเพื่อให้สามารถอยู่กึ่งกลางแนวตั้งได้อาจไม่ใช่ความคิดที่ดี มีตัวเลือกอื่น ๆ เช่น flexbox และการแปลง CSS ซึ่งเหมาะสมกว่าสำหรับตัวเลือกเหล่านั้น.