Bootstrap 4, Làm cách nào để căn giữa nút?

<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>

Không thể tìm ra cách căn giữa nút này. Trong BS 3, tôi sẽ chỉ sử dụng khối trung tâm nhưng đó không phải là một tùy chọn trong BS4. Có lời khuyên nào không?

Trong Bootstrap 4, người ta nên sử dụng text-centerlớp để căn chỉnh các khối nội tuyến .

LƯU Ý: text-align:center;được định nghĩa trong một lớp tùy chỉnh mà bạn áp dụng cho phần tử mẹ của mình sẽ hoạt động bất kể phiên bản Bootstrap bạn đang sử dụng. Và đó chính xác là những gì .text-centeráp dụng.

<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>

Nếu nội dung cần căn giữa là khối hoặc flex (không phải inline-), người ta có thể sử dụng flexbox để căn giữa:

<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>

... áp dụng display: flex; justify-content: centercho phụ huynh.

Lưu ý: không sử dụng .row.justify-content-centerthay vì .d-flex.justify-content-center, như .rowáp dụng biên độ tiêu cực đối với khoảng thời gian đáp ứng nhất định, mà kết quả vào thanh cuộn ngang bất ngờ (trừ khi .rowlà một đứa trẻ trực tiếp .container, áp dụng đệm bên để chống lại lề tiêu cực, trên khoảng đáp ứng đúng). Nếu bạn phải sử dụng .row, vì bất kỳ lý do gì, hãy ghi đè lề và phần đệm của nó .m-0.p-0, trong trường hợp đó, bạn sẽ có khá nhiều kiểu giống như .d-flex.

Lưu ý quan trọng: Giải pháp thứ hai có vấn đề khi nội dung được căn giữa (nút) vượt quá chiều rộng của cha ( .d-flex), đặc biệt là khi cha có chiều rộng khung nhìn, cụ thể là vì nó không thể cuộn theo chiều ngang đến đầu nội dung (trái- phần lớn).
Vì vậy, không sử dụng nó khi nội dung được căn giữa có thể trở nên rộng hơn chiều rộng gốc có sẵn và tất cả nội dung đều có thể truy cập được.

Hãy thử điều này với bootstrap

MÃ:

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

LIÊN KẾT:

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

Đây là HTML đầy đủ mà tôi sử dụng để căn giữa từng nút trong biểu mẫu Bootsrap sau khi đóng nhóm biểu mẫu:

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

Với việc sử dụng các tiện ích bootstrap 4, bạn có thể căn giữa một phần tử theo chiều ngang bằng cách đặt các lề ngang thành 'tự động'.

Để đặt lề ngang thành tự động, bạn có thể sử dụng mx-auto. Tham chiếu mđến lề và xsẽ tham chiếu đến trục x (trái + phải) và autosẽ tham chiếu đến cài đặt. Vì vậy, điều này sẽ đặt lề trái và lề phải thành cài đặt 'tự động'. Các trình duyệt sẽ tính toán lề bằng nhau và căn giữa phần tử. Cài đặt sẽ chỉ hoạt động trên các phần tử khối do đó, khối display: cần được thêm vào và với các tiện ích bootstrap, điều này được thực hiện bởi d-block.

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

Bạn có thể coi tất cả các trình duyệt hỗ trợ đầy đủ cài đặt ký quỹ tự động theo câu trả lời này Trình duyệt hỗ trợ ký quỹ: tự động nên rất an toàn khi sử dụng.

Lớp bootstrap 4 text-centercũng là một giải pháp rất tốt, tuy nhiên nó cần một phần tử bao bọc mẹ. Lợi ích của việc sử dụng tự động ký quỹ là nó có thể được thực hiện trực tiếp trên chính phần tử nút.

Sử dụng text-centerlớp trong vùng chứa mẹ cho Bootstrap 4

Điều hiệu quả đối với tôi là (điều chỉnh "css / style.css" thành đường dẫn css của bạn):

HTML đầu:

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

HTML nội dung:

 <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
}

đối với một nút trong thanh điều hướng thu gọn, không có gì ở trên hoạt động với tôi vì vậy trong tệp css của tôi, tôi đã làm .....

.navbar button {
    margin:auto;
}

va no đa hoạt động!!

bạn cũng có thể chỉ bọc bằng lớp H hoặc lớp P với thuộc tính trung tâm văn bản