วิธีจัดแนวศูนย์กลางภาพที่ตายแล้วด้วย bootstrap

ฉันใช้เฟรมเวิร์ก bootstrap และพยายามทำให้รูปภาพอยู่กึ่งกลางแนวนอนโดยไม่สำเร็จ ..

ฉันได้ลองเทคนิคต่าง ๆ เช่นการแยกระบบ 12 กริดใน 3 บล็อกเท่ากัน

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

วิธีที่ง่ายที่สุดในการทำให้ภาพอยู่กึ่งกลางสัมพันธ์กับหน้าคืออะไร

Twitter Bootstrap v3.0.3 มีคลาส: center-block

บล็อกเนื้อหากลาง

ตั้งค่าองค์ประกอบที่จะแสดง: บล็อกและกึ่งกลางผ่านระยะขอบ มีทั้งมิกซ์อินและคลาส

เพียงแค่ต้องเพิ่มคลาส.center-blockในimgแท็กดูเหมือนว่านี้

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

ใน Bootstrap มีการเรียกลักษณะ css อยู่แล้ว. center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

คุณสามารถดูตัวอย่างได้จากที่นี่

วิธีที่ถูกต้องในการทำเช่นนี้คือ

<div class="row text-center">
  <img ...>
</div>

อัปเดต 2018

center-blockชั้นไม่มีอยู่ในBootstrap 4 หากต้องการจัดกึ่งกลางภาพใน Bootstrap 4 ให้ใช้mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

เพิ่ม 'center-block' ให้กับรูปภาพเป็นคลาส - ไม่จำเป็นต้องใช้ CSS เพิ่มเติม

<img src="images/default.jpg" class="center-block img-responsive"/>

Twitter bootstrap มีคลาสที่จัดกึ่งกลาง: .pagination-centered

มันทำงานให้ฉันทำ:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

CSS สำหรับชั้นเรียนคือ:

.pagination-centered {
  text-align: center;
}

คุณสามารถใช้สิ่งต่อไปนี้ รองรับ Bootstrap 3.x ด้านบน

<img src="..." alt="..." class="img-responsive center-block" />

สมมติว่าไม่มีสิ่งอื่นใดควบคู่กับภาพวิธีที่ดีที่สุดคือใช้text-align: centerในพาเรนต์img:

.row .span4 {
    text-align: center;
}

แก้ไข

ดังที่กล่าวไว้ในคำตอบอื่น ๆ คุณสามารถเพิ่มคลาส bootstrap CSS .text-centerในองค์ประกอบหลัก สิ่งนี้ทำสิ่งเดียวกันและมีให้ในv2.3.3และv3

ได้ผลสำหรับฉัน ลองใช้center-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

ฉันต้องการสิ่งเดียวกันและที่นี่ฉันพบวิธีแก้ปัญหา:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

และ CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

คุณสามารถใช้คุณสมบัติมาร์จิ้นกับคลาส bootstrap img

.name-of-class .img-responsive { margin: 0 auto; }

ดูเหมือนว่าเราสามารถใช้คุณสมบัติ HTML5 ใหม่ได้หากเวอร์ชันของเบราว์เซอร์ไม่มีปัญหา:

ในไฟล์ HTML:

<div class="centerBloc">
  I will be in the center
</div>

และในไฟล์ CSS เราเขียน:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

และเพื่อให้ div สามารถอยู่กึ่งกลางในเบราว์เซอร์

คุณควรใช้

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

ฉันใช้justify-content-centerคลาสต่อแถวภายในคอนเทนเนอร์ ทำงานได้ดีกับ Bootstrap 4

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

ฉันสร้างสิ่งนี้และเพิ่มลงใน Site.css

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

คุณสามารถเปลี่ยน CSS ของโซลูชันก่อนหน้าได้ดังนี้:

.container, .row { text-align: center; }

สิ่งนี้ควรจัดองค์ประกอบทั้งหมดให้อยู่กึ่งกลางใน parent divเช่นกัน