ฉันทำแคตตาล็อกโดยใช้ Bootstrap 3 เมื่อแสดงบนแท็บเล็ตภาพผลิตภัณฑ์ดูน่าเกลียดเพราะขนาดเล็ก (500x500) และความกว้าง 767 พิกเซลในเบราว์เซอร์ ฉันต้องการที่จะวางภาพในใจกลางของหน้าจอ แต่ด้วยเหตุผลบางอย่างที่ฉันไม่สามารถ ใครจะเป็นผู้ช่วยแก้ปัญหา?
คำตอบ:
หากคุณใช้ Bootstrap v3.0.1 หรือสูงกว่าคุณควรใช้วิธีนี้แทน มันไม่ได้แทนที่สไตล์ของ Bootstrap ด้วย CSS ที่กำหนดเอง แต่ใช้คุณลักษณะ Bootstrap แทน
คำตอบเดิมของฉันแสดงไว้ด้านล่างเพื่อลูกหลาน
นี่คือการแก้ไขที่ง่ายเป็นสุข เนื่องจาก.img-responsiveจาก Bootstrap ตั้งค่าไว้แล้วdisplay: blockคุณสามารถใช้จัดmargin: 0 autoกึ่งกลางภาพได้:
.product .img-responsive {
margin: 0 auto;
}margin: 0 autoแทนที่จะเปลี่ยน. img-responsive
มี.center-blockคลาสใน Twitter Bootstrap 3 ( ตั้งแต่ v3.0.1 ) ดังนั้นให้ใช้:
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"ใช้งานได้สำหรับฉันclass="img-responsive center-block"ไม่ได้ (bootstrap 3 แต่เป็นรุ่นเก่าสองสามเดือน)
<a href="#"> </a>คู่พื้นที่ที่สามารถคลิกได้จะถูกขยายจนเต็มความกว้างของคอนเทนเนอร์ล้อมรอบซึ่งอาจมีขนาดใหญ่กว่าภาพของคุณเล็กน้อย สิ่งนี้อาจสร้างความสับสนให้กับผู้ใช้ที่คลิกสิ่งที่พวกเขาคิดว่าเป็นพื้นที่ "ว่าง"
เพิ่มเฉพาะคลาสcenter-blockให้กับรูปภาพซึ่งใช้ได้กับ Bootstrap 4 เช่นกัน:
<img src="..." alt="..." class="center-block" />หมายเหตุ: ใช้center-blockงานได้แม้img-responsiveใช้งานอยู่
เพียงแค่ใช้.text-centerคลาสถ้าคุณใช้ Bootstrap 3
<div class="text-center">
<img src="..." alt="..."/>
</div>หมายเหตุ: วิธีนี้ใช้ไม่ได้กับ img-responsive
img-responsive
สิ่งนี้ควรจัดกึ่งกลางภาพและทำให้ตอบสนองได้ดี
<img src="..." class="img-responsive" style="margin:0 auto;"/>ฉันอยากจะแนะนำการจำแนกประเภท "นามธรรม" เพิ่มเติม เพิ่มคลาสใหม่ "img-center" ซึ่งสามารถใช้ร่วมกับ. img-responsive class:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}display: table? มันdisplay: blockเพียงพอแล้วที่จะmargin: 0 autoไปทำงาน
คุณยังสามารถใช้งานได้img-responsiveโดยไม่กระทบกับรูปภาพอื่นด้วยคลาสสไตล์นี้
คุณสามารถนำหน้าแท็กนี้ด้วยส่วน id / div id / class เพื่อกำหนดคำสั่งที่สิ่งนี้imgซ้อนอยู่ ประเพณีนี้img-responsiveจะทำงานเฉพาะในพื้นที่นั้น
สมมติว่าคุณมีพื้นที่ HTML ที่กำหนดเป็น:
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>จากนั้น CSS ของคุณสามารถ:
section#work .img-responsive{
margin: 0 auto;
}หมายเหตุ: คำตอบนี้สัมพันธ์กับผลกระทบที่อาจเกิดขึ้นจากการเปลี่ยนแปลงimg-responsiveโดยรวม แน่นอนว่าcenter-blockเป็นทางออกที่ง่ายที่สุด
ลองใช้รหัสนี้มันจะทำงานสำหรับไอคอนเล็ก ๆ เช่นกันกับ bootstrap 4 เพราะไม่มีคลาสบล็อกกลางเป็น bootstrap 4 ดังนั้นลองใช้วิธีนี้มันจะมีประโยชน์ คุณสามารถเปลี่ยนตำแหน่งของภาพโดยการตั้งค่า.col-md-12ไป.col-md-8หรือ.col-md-4ก็ไม่เกินคุณ
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-xs-center text-lg-center">
<img src="" class="img-thumbnail">
</div>
</div>
</div>
</div>ลองสิ่งนี้:
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
.Image{
background:#ccc;
padding:30px;
}<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>เพียงวางภาพขนาดย่อทั้งหมดไว้ในแถว / col divs ดังนี้:
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>และทุกอย่างจะทำงานได้ดี!
เพื่อเพิ่มการตอบรับแล้วมีimg-responsiveร่วมกับimg-thumbnailจะตั้งไปdisplay: blockdisplay: inline block
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>คุณสามารถแก้ไขได้ด้วยการกำหนดระยะขอบ: 0 อัตโนมัติ
หรือคุณสามารถใช้ col-md-offset ได้เช่นกัน
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>
<div class="container">
<h2>Image</h2>
<div class="row">
<div class="col-md-12">
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</div>
</div>
</body>
</html>วิธีที่แม่นยำยิ่งขึ้นที่นำไปใช้กับวัตถุ Booostrap ทั้งหมดที่ใช้คลาสมาตรฐานจะไม่ตั้งค่าระยะขอบบนและล่าง (เนื่องจากรูปภาพสามารถสืบทอดสิ่งเหล่านี้จากพาเรนต์) ดังนั้นฉันจึงมักจะใช้:
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}ฉันได้ทำ Gist แล้วดังนั้นหากมีการเปลี่ยนแปลงใด ๆ ที่จะเกิดขึ้นเนื่องจากข้อผิดพลาดใด ๆ เวอร์ชันอัปเดตจะอยู่ที่นี่เสมอ: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
<img class="center-block" ... />เพื่อให้ห่างไกลทางออกที่ดีที่สุดที่จะยอมรับความน่าจะเป็น แต่ไม่มีใครพูดถึงวิธีการcenter-blockทำงาน
ใช้ Bootstrap v3.3.6 ตัวอย่างเช่น:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}ค่าเริ่มต้นของdispalyสำหรับเป็น<img> inlineค่าblockจะแสดงองค์ประกอบเป็นองค์ประกอบบล็อก (เช่น<p>) มันเริ่มต้นในบรรทัดใหม่และรับความกว้าง ด้วยวิธีนี้การตั้งค่าระยะขอบทั้งสองทำให้ภาพอยู่ในแนวนอนตรงกลาง
:)