วิธีกำหนดตำแหน่งปุ่มกลางใน Twitter Bootstrap 3

ฉันกำลังสร้างฟอร์มใน Twitter Bootstrap แต่ฉันมีปัญหากับการกดปุ่มตรงกลางด้านล่างอินพุตในแบบฟอร์ม ฉันได้ลองใช้center-blockชั้นเรียนกับปุ่มแล้ว แต่ไม่ได้ผล ฉันจะแก้ไขได้อย่างไร

นี่คือรหัสของฉัน

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

ล้อมรอบปุ่มใน div ด้วยคลาส "text-center"

แค่เปลี่ยนสิ่งนี้:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

สำหรับสิ่งนี้:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

แก้ไข

ในฐานะของBootstrapV4 , center-blockถูกทิ้ง# 19102ในความโปรดปรานของm-*-auto

ตามเอกสาร Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

คลาสทั้งหมดcenter-blockทำเพื่อบอกองค์ประกอบให้มีระยะขอบเป็น 0 อัตโนมัติซึ่งเป็นระยะขอบซ้าย / ขวา อย่างไรก็ตามเว้นแต่ class-center text หรือ css text-align: center; มีการตั้งค่าไว้ในพาเรนต์องค์ประกอบไม่ทราบว่าจะคำนวณการคำนวณอัตโนมัตินี้ได้อย่างไรดังนั้นจะไม่จัดกึ่งกลางตัวเองตามที่คาดไว้

ดูตัวอย่างของรหัสด้านบนได้ที่นี่: https://jsfiddle.net/Seany84/2j9pxt1z/

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

เพิ่มสไตล์ของคุณ:

แสดง: ตาราง; กำไรขั้นต้น: 0 อัตโนมัติ

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

คุณสามารถทำได้โดยให้ระยะขอบหรือวางองค์ประกอบเหล่านั้นอย่างแน่นอน

ตัวอย่างเช่น

.button{
  margin:0px auto; //it will center them 
}

0px จะมาจากด้านบนและด้านล่างและอัตโนมัติจะมาจากซ้ายและขวา

ฉันลองใช้รหัสต่อไปนี้และได้ผลกับฉัน

<button class="btn btn-default center-block" type="submit">Button</button>

การควบคุมปุ่มอยู่ใน div และการใช้คลาส center-block ของ bootstrap ช่วยให้ฉันจัดตำแหน่งปุ่มให้อยู่กึ่งกลาง div

ตรวจสอบลิงค์ที่คุณจะพบชั้นกลางบล็อก

http://getbootstrap.com/css/#helper-classes-center

ใช้text-align: centerคุณสมบัติ CSS

อัพเดตสำหรับ Bootstrap 4:

ล้อมปุ่มด้วยชุด div ด้วยคลาสยูทิลิตี้ 'd-flex' และ 'justify-content-center' เพื่อใช้ประโยชน์จาก flexbox

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

ประโยชน์ของการใช้ flexbox จะสามารถเพิ่มองค์ประกอบ / ปุ่มเพิ่มเติมบนแกนเดียวกัน แต่ด้วยการจัดตำแหน่งแยกต่างหาก นอกจากนี้ยังเปิดโอกาสในการจัดแนวตั้งด้วยคลาส 'align-items-start / center / end' ด้วย

คุณสามารถตัดป้ายกำกับและปุ่มด้วย div อื่นเพื่อให้พวกเขาอยู่ในแนวเดียวกัน

เช่นhttps://codepen.io/anon/pen/BJoeRY?editors=1000

คุณสามารถทำสิ่งต่อไปนี้ นอกจากนี้ยังหลีกเลี่ยงปุ่มที่ทับซ้อนกัน

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

มันใช้งานได้สำหรับฉันพยายามที่จะทำให้เป็นอิสระ<div>แล้วใส่buttonลงไปที่ เช่นนี้

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

จากนั้นไปที่CSSหน้าสไตล์ของคุณและทำสิ่งText-align:centerนี้:

#contactBtn{text-align: center;}

สำหรับ Bootstrap 3

เราแบ่งช่องว่างด้วยคอลัมน์เราใช้ 8 คอลัมน์เล็ก (col-xs-8) เราปล่อยให้คอลัมน์ที่ว่างเปล่า 4 คอลัมน์ (col-xs-offset-4) และเราใช้คุณสมบัติ (center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

สำหรับ Bootstrap 4

เราใช้การเว้นวรรค Bootstrap รวมถึงคลาสยูทิลิตี้การตอบสนองแบบย่อและแบบบุรองหลากหลายเพื่อปรับเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบ คลาสถูกตั้งชื่อโดยใช้รูปแบบ {property} {side} - {size} สำหรับ xs และ {property} {ข้าง} - {เบรกพอยต์} - {size} สำหรับ sm, md, lg และ xl

ข้อมูลเพิ่มเติมได้ที่นี่: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

ฉันมีปัญหานี้ ฉันใช้

<div class = "col-xs-8 text-center">

ใน div ของฉันมี h3 ไม่กี่บรรทัด, คู่ h4 และปุ่ม Bootstrap ทุกอย่างนอกเหนือจากปุ่มที่เพิ่มขึ้นไปยังศูนย์หลังจากที่ฉันใช้ text-center ดังนั้นฉันจึงเข้าไปที่ CSS ชีทของฉันแทนที่ Bootstrap และให้ปุ่ม

margin: auto;

ซึ่งดูเหมือนว่าจะมีการแก้ไขปัญหา

หรือคุณสามารถกำหนดค่า offsets เฉพาะเพื่อให้ตำแหน่งปุ่มที่คุณต้องการเพียงแค่ใช้ระบบกริดสแตรป

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

วิธีนี้ให้คุณระบุขนาดของปุ่มถ้าคุณตั้งค่าบล็อก btn แน่นอนว่าจะใช้งานได้เฉพาะช่วงขนาด md เท่านั้นหากคุณต้องการตั้งค่าขนาดอื่นด้วยให้ใช้ xs, sm, lg