ในตัวอย่างนี้ภาพไม่ได้อยู่กึ่งกลาง ทำไม? เบราว์เซอร์ของฉันคือ Google Chrome v10 บน windows 7 ไม่ใช่ IE
<img src="/img/logo.png" style="margin:0px auto;"/>
คำตอบ:
เพิ่มdisplay:block;แล้วมันจะทำงาน รูปภาพจะอยู่ในบรรทัดโดยค่าเริ่มต้น
เพื่อชี้แจงความกว้างเริ่มต้นสำหรับblockองค์ประกอบคือautoซึ่งแน่นอนว่าจะเติมเต็มความกว้างที่มีอยู่ทั้งหมดขององค์ประกอบที่มี
โดยการตั้งค่าอัตรากำไรขั้นต้นที่จะautoมอบหมายเบราว์เซอร์ครึ่งหนึ่งของพื้นที่เหลือสำหรับการและอีกครึ่งหนึ่งจะmargin-leftmargin-right
margin:autoการจัดกึ่งกลางรายการในโฟลว์ ( display:blockหรือdisplay:table, position:staticหรือposition:relativeอื่น ๆ )
0px autoจะเปลี่ยนเป็นเพียงแค่autoมันก็ยังไม่ได้ผล
display: flex; align-items: center; justify-content: centerและตอนนี้เนื้อหาของคุณอยู่ตรงกลางในแนวนอนและแนวตั้ง หรือย้ายไปalign-self: center; justify-self: centerที่เนื้อหาเอง css-tricks.com/snippets/css/a-guide-to-flexbox
ภายใต้สถานการณ์บาง (เช่นรุ่นก่อนหน้า IE, ตุ๊กแก Webkit) และมรดกองค์ประกอบที่มีposition:relative;จะป้องกันmargin:0 auto;จากการทำงานแม้ว่าtop, right, bottomและleftไม่ได้ตั้งค่า
การตั้งค่าองค์ประกอบเป็นposition:static;(ค่าเริ่มต้น) อาจแก้ไขได้ภายใต้สถานการณ์เหล่านี้ โดยทั่วไปองค์ประกอบระดับบล็อกที่มีความกว้างที่ระบุจะmargin:0 auto;ใช้อย่างใดอย่างหนึ่งrelativeหรือการstaticวางตำแหน่ง
margin: 0 autoใช้งานได้ดีกับองค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างยาวตราบเท่าที่เป็นองค์ประกอบบล็อกที่ไม่มีลอยและความกว้างที่ระบุ ...
floatและdisplayสามารถเปลี่ยนแปลงพฤติกรรมนั้นได้
คุณสามารถจัดกึ่งกลาง div ความกว้างอัตโนมัติโดยใช้ display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
ในกรณีของปัญหาที่เกิดขึ้นคือการที่ผมได้ตั้งนาทีและความกว้างสูงสุดโดยไม่ต้องมีความกว้างตัวเอง
position:staticมีwidth:ชุดคงที่และเป็นdisplay:blockองค์ประกอบ
เมื่อใดก็ตามที่เราไม่เพิ่มความกว้างและเพิ่มmargin:autoฉันเดาว่ามันจะไม่ได้ผล มันมาจากประสบการณ์ของฉัน ความกว้างให้แนวคิดว่าจะต้องให้ระยะขอบเท่ากัน
มีทางเลือกอื่นmargin-left:auto; margin-right: auto;หรือmargin:0 auto;สำหรับคนที่ใช้position:absolute;วิธีนี้:
คุณตั้งค่าตำแหน่งด้านซ้ายขององค์ประกอบเป็น 50% ( left:50%;) แต่จะไม่จัดกึ่งกลางอย่างถูกต้องเพื่อให้องค์ประกอบอยู่ตรงกลางอย่างถูกต้องคุณต้องให้ ระยะขอบของลบครึ่งหนึ่งของความกว้างซึ่งจะจัดกึ่งกลางองค์ประกอบของคุณอย่างสมบูรณ์แบบ
นี่คือตัวอย่าง: http://jsfiddle.net/35ERq/3/
สำหรับปุ่ม bootstrap:
display: table;
margin: 0 auto;
ใส่สิ่งนี้ใน css ของร่างกาย: background: # 3D668F; จากนั้นเพิ่ม: display: block; ระยะขอบ: อัตโนมัติ; ไปที่ css ของ img
ฉันจำได้ว่าวันหนึ่งฉันใช้เวลาส่วนใหญ่ในการพยายามจัด div ให้อยู่กึ่งกลางโดยใช้margin: 0 auto.
ฉันมีdisplay: inline-blockมันเมื่อฉันถอดมันออก div อยู่ตรงกลางอย่างถูกต้อง
ดังที่ Ross ชี้ให้เห็นว่ามันใช้ไม่ได้กับองค์ประกอบแบบอินไลน์