<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
divขยายถึง 100% ตามที่ควร แต่ภาพที่ไม่ได้อยู่ตรงกลางของตัวเอง ทำไม?
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
divขยายถึง 100% ตามที่ควร แต่ภาพที่ไม่ได้อยู่ตรงกลางของตัวเอง ทำไม?
คำตอบ:
เพราะภาพของคุณเป็นองค์ประกอบแบบอินไลน์บล็อก คุณสามารถเปลี่ยนเป็นองค์ประกอบระดับบล็อกได้ดังนี้:
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
และมันจะอยู่ตรงกลาง
คุณต้องแสดงเป็นระดับบล็อก
img {
display: block;
width: auto;
margin: auto;
}
เพิ่ม style="text-align:center;"
ลองใช้รหัสด้านล่าง
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
display: block;ขอแนะนำให้เพิ่มลงในภาพ
ฉันรู้ว่านี่เป็นโพสต์เก่า แต่ต้องการแบ่งปันวิธีที่ฉันแก้ไขปัญหาเดียวกัน
ภาพของฉันได้รับการสืบทอดการลอย: เหลือจากคลาสแม่ โดยการตั้งค่า float: none ฉันสามารถสร้าง margin: 0 auto และ display: block ทำงานได้อย่างถูกต้อง หวังว่ามันอาจช่วยใครบางคนได้ในอนาคต
ฉันพบว่าฉันต้องกำหนดความกว้างเฉพาะสำหรับวัตถุไม่เช่นนั้นจะไม่มีสิ่งอื่นใดที่จะทำให้มันอยู่ตรงกลาง ความกว้างสัมพัทธ์ไม่ทำงาน
เปิดdivแล้วใส่
style="width:100% ; margin:0px auto;"
image แท็ก (หรือ) เนื้อหา
ปิด div
<div style="text-align:center;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
ฉันพบ ... ระยะขอบ: 0 อัตโนมัติ; เหมาะกับฉัน แต่ฉันยังเห็นว่ามันไม่ได้ผลเนื่องจากคลาสถูกทรัมป์โดยความเฉพาะเจาะจงอื่นที่มี ... ลอย: ซ้าย; ดังนั้นโปรดระวังว่าคุณอาจต้องเพิ่ม ... float: none; สิ่งนี้ใช้ได้ผลในกรณีของฉันขณะที่ฉันกำลังเขียนโค้ดแบบสอบถามสื่อ
display:block