จะจัดกึ่งกลาง div ด้วย Bootstrap2 ได้อย่างไร?

http://twitter.github.com/bootstrap/scaffolding.html

ฉันลองเหมือนชุดค่าผสมทั้งหมด:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

หรือ

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

เปลี่ยนช่วงและตัวเลขชดเชย ...

แต่ฉันไม่สามารถเอากล่องธรรมดาที่อยู่ตรงกลางหน้าได้อย่างสมบูรณ์แบบ :(

ฉันแค่ต้องการกล่องกว้าง 6 คอลัมน์ที่อยู่ตรงกลาง ...

ทำกับ

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

แต่กล่องกว้างเกินไปมีวิธีใดบ้างที่ฉันสามารถทำได้ด้วย span7?

span7 offset2เพิ่มช่องว่างภายในช่องว่างด้านซ้ายspan7 offset3เพิ่มเติมทางด้านขวา ...

นอกเหนือจากการหดตัว div ที่ตัวเองไปขนาดที่คุณต้องการโดยการลดขนาดช่วงเช่นดังนั้น ... class="span6 offset3", class="span4 offset4"ฯลฯ ... สิ่งที่ง่ายเป็นstyle="text-align: center"ใน div ที่อาจมีผลที่คุณกำลังมองหา

คุณไม่สามารถใช้ span7 กับชุดออฟเซ็ตใด ๆ และกำหนดให้สแปนอยู่กึ่งกลางของหน้า (เนื่องจากช่วงรวม = 12)

สแปนของ Bootstrap จะลอยไปทางซ้าย สิ่งที่ต้องทำเพื่อให้เป็นศูนย์กลางคือการลบล้างพฤติกรรมนี้ ฉันทำได้โดยเพิ่มสิ่งนี้ในสไตล์ชีตของฉัน:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

หากคุณกำหนดคลาสนี้เพียงแค่เพิ่มลงในช่วงและคุณก็พร้อมที่จะไป

<div class="span7 center"> box </div>

โปรดทราบว่าคลาสศูนย์ที่กำหนดเองนี้ต้องถูกกำหนดหลังจาก bootstrap css คุณสามารถใช้ได้!importantแต่ไม่แนะนำ

Bootstrap3 มี.center-blockคลาสที่คุณสามารถใช้ได้ ถูกกำหนดให้เป็น

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

เอกสารที่นี่ .

หากคุณต้องการไปที่ full-bootstrap (ไม่ใช่ทางซ้าย / ขวาอัตโนมัติ) คุณต้องมีรูปแบบที่พอดีภายใน 12 คอลัมน์เช่น 2 ช่องว่าง 8 เนื้อหา 2 ช่องว่าง นั่นคือสิ่งที่การตั้งค่านี้จะทำ ครอบคลุมเฉพาะตัวแปร-md-ฉันมักจะย่อขนาดเต็มสำหรับขนาดเล็กโดยการเพิ่ม col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

ดูเหมือนว่าคุณต้องการจัดกึ่งกลางคอนเทนเนอร์เดียว เฟรมเวิร์ก bootstrap อาจซับซ้อนเกินไปตัวอย่างหนึ่งคุณอาจมี div แบบสแตนด์อโลนที่มีสไตล์ของคุณเองเช่น:

<div class="login-container">
  <!-- Your Login Form -->
</div>

และสไตล์:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

วิธีนี้จะใช้งานได้ดีหากคุณซ้อนอยู่ที่ไหนสักแห่งภายใน bootstrap .containerdiv

เพิ่มเนื้อหากลางชั้นเรียน

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

รหัส @ZuhaibAli ทำงานให้ฉัน แต่ฉันเปลี่ยนมันเล็กน้อย:

ฉันสร้างคลาสใหม่ใน css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

จากนั้น div จะกลายเป็น

<div class="center col-md-6"></div>

ฉันเพิ่ม col-md-6 สำหรับความกว้างของ div เองซึ่งในสถานการณ์นี้หมายความว่า div มีขนาดครึ่งหนึ่งมี 1 -12 col md ใน bootstrap

ทำตามคำแนะนำนี้https://getbootstrap.com/docs/3.3/css/

ใช้ .center-block

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

ห่อ div ใน div หลักด้วยคลาสrowจากนั้นเพิ่มสไตล์margin:0 auto;ให้กับ div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>