Bootstrap 4 ฉันจะจัดตำแหน่งปุ่มตรงกลางได้อย่างไร

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

คิดไม่ออกว่าจะวางปุ่มนี้ไว้ตรงกลางอย่างไร ใน BS 3 ฉันจะใช้แค่ศูนย์บล็อก แต่นั่นไม่ใช่ตัวเลือกใน BS4 คำแนะนำใด ๆ?

ใน Bootstrap 4 หนึ่งควรใช้text-centerระดับเพื่อให้สอดคล้องอินไลน์บล็อก

หมายเหตุ: text-align:center;กำหนดไว้ในคลาสแบบกำหนดเองที่คุณใช้กับองค์ประกอบหลักของคุณจะทำงานไม่ว่าคุณจะใช้ Bootstrap เวอร์ชันใด และนั่นคือสิ่งที่.text-centerใช้ได้จริง

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

หากเนื้อหาที่จะจัดกึ่งกลางเป็นบล็อกหรือดิ้น (ไม่ใช่inline-) สามารถใช้ flexbox เพื่อจัดกึ่งกลางได้:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... ซึ่งใช้display: flex; justify-content: centerกับผู้ปกครอง

หมายเหตุ:อย่าใช้.row.justify-content-centerแทน.d-flex.justify-content-centerเนื่องจาก.rowใช้ขอบลบในช่วงเวลาการตอบสนองบางช่วงซึ่งส่งผลให้เกิดแถบเลื่อนแนวนอนที่ไม่คาดคิด (เว้นแต่.rowเป็นลูกโดยตรง.containerซึ่งใช้ช่องว่างด้านข้างเพื่อต่อต้านระยะขอบเชิงลบในช่วงการตอบสนองที่ถูกต้อง) ถ้าคุณต้องใช้.rowเหตุผลใดแทนที่ขอบและ padding ด้วยซึ่งในกรณีนี้คุณท้ายด้วยสวยมากรูปแบบเดียวกับ.m-0.p-0.d-flex

หมายเหตุสำคัญ:แนวทางที่สองมีปัญหาเมื่อเนื้อหาที่อยู่ตรงกลาง (ปุ่ม) เกินความกว้างของพาเรนต์ ( .d-flex) โดยเฉพาะอย่างยิ่งเมื่อพาเรนต์มีความกว้างของวิวพอร์ตโดยเฉพาะเนื่องจากทำให้ไม่สามารถเลื่อนไปยังจุดเริ่มต้นของเนื้อหาในแนวนอนได้ (ซ้าย - มากที่สุด).
ดังนั้นอย่าใช้เมื่อเนื้อหาที่จะจัดกึ่งกลางอาจกว้างกว่าความกว้างหลักที่มีอยู่และเนื้อหาทั้งหมดควรเข้าถึงได้

ลองใช้ bootstrap

รหัส:

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

ลิงค์:

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

นี่คือ HTML แบบเต็มที่ฉันใช้เพื่อจัดกึ่งกลางปุ่มในแบบฟอร์ม Bootsrap หลังจากปิด form-group:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

ด้วยการใช้ยูทิลิตี้ bootstrap 4 คุณสามารถจัดองค์ประกอบในแนวนอนโดยตั้งค่าระยะขอบแนวนอนเป็น 'อัตโนมัติ'

ในการตั้งค่าระยะขอบแนวนอนเป็นอัตโนมัติคุณสามารถmx-autoใช้ได้ mหมายถึงอัตรากำไรขั้นต้นและxจะอ้างถึงแกน x (ซ้าย + ขวา) และautoจะอ้างถึงการตั้งค่า ดังนั้นจะตั้งค่าระยะขอบซ้ายและขอบขวาเป็นการตั้งค่า "อัตโนมัติ" เบราว์เซอร์จะคำนวณระยะขอบเท่า ๆ กันและจัดองค์ประกอบให้อยู่กึ่งกลาง การตั้งค่าจะทำงานบนองค์ประกอบของบล็อกเพื่อให้การแสดงผล: d-blockความต้องการบล็อกที่จะเพิ่มและสาธารณูปโภคบูตนี้จะทำโดย

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

คุณสามารถพิจารณาเบราว์เซอร์ทั้งหมดเพื่อรองรับการตั้งค่าระยะขอบอัตโนมัติตามคำตอบนี้เบราว์เซอร์รองรับระยะขอบ: อัตโนมัติจึงปลอดภัยที่จะใช้

คลาส bootstrap 4 text-centerเป็นวิธีแก้ปัญหาที่ดีมากเช่นกันอย่างไรก็ตามมันต้องการองค์ประกอบของแร็ปเปอร์หลัก ประโยชน์ของการใช้ระยะขอบอัตโนมัติคือสามารถทำได้โดยตรงบนองค์ประกอบปุ่มเอง

ใช้text-centerคลาสในคอนเทนเนอร์หลักสำหรับ Bootstrap 4

สิ่งที่ใช้ได้ผลสำหรับฉันคือ (ปรับ "css / style.css" กับเส้นทาง css ของคุณ):

หัว HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

HTML ของเนื้อหา:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

Css:

.mycentered-text {
    text-align:center
}

สำหรับปุ่มในแถบนำทางที่ยุบไม่มีอะไรด้านบนใช้งานได้สำหรับฉันดังนั้นในไฟล์ css ของฉันฉันทำ .....

.navbar button {
    margin:auto;
}

และได้ผล !!

คุณยังสามารถห่อด้วยคลาส H หรือคลาส P ที่มีแอตทริบิวต์ text-center