부트스트랩 4, 버튼을 중앙 정렬하려면 어떻게 해야 합니까?

부트스트랩 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에서는 옵션이 아닙니다.조언 좀 해주세요.

부트스트랩 4에서는 다음을 사용해야 합니다.text-center인라인 블록을 정렬합니다.

참고:text-align:center;부모 요소에 적용하는 사용자 지정 클래스에서 정의된 것은 사용 중인 부트스트랩 버전에 관계없이 작동합니다.그리고 그게 바로 그거에요..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, 어떤 이유에서건, 그 여백을 무시하고 그 안에 덧씌우세요..m-0.p-0, 이 경우에 당신은 결국 다음과 같은 스타일을 갖게 됩니다..d-flex.

참고 사항:두 번째 솔루션은 중심이 되는 내용(버튼)이 부모의 폭()을 초과하는 경우 문제가 됩니다..d-flex) 특히 부모가 뷰포트 너비를 가지고 있는 경우, 특히 컨텐츠의 시작 부분까지 수평으로 스크롤하는 것이 불가능하기 때문입니다(좌측).
따라서 중심이 될 콘텐츠가 사용 가능한 상위 너비보다 넓어질 수 있고 모든 콘텐츠에 액세스할 수 있어야 할 때는 사용하지 마십시오.

부트스트랩과 함께 사용해 보십시오.

코드:

<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폭-내용

부트스트랩 4 유틸리티를 사용하면 수평 여백을 '자동'으로 설정하여 요소 자체의 수평 중심을 잡을 수 있습니다.

수평 여백을 자동으로 설정하는 방법mx-auto.그m마진과 더를 말합니다.xx축(좌+우)을 참조하고auto는 설정을 참조합니다.따라서 왼쪽 여백과 오른쪽 여백이 '자동' 설정으로 설정됩니다.브라우저는 마진을 동일하게 계산하고 요소의 중심을 맞춥니다.이 설정은 block 요소에서만 작동하므로 display:block을 추가해야 하며 부트스트랩 유틸리티를 사용하면 다음과 같은 작업을 수행할 수 있습니다.d-block.

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

이 답변에 따라 자동 마진 설정을 완전히 지원하도록 모든 브라우저를 고려할 수 있습니다. 브라우저에서 마진: 자동을 지원하므로 안전하게 사용할 수 있습니다.

부트스트랩 4반text-center또한 매우 좋은 솔루션이지만 부모 래퍼 요소가 필요합니다.자동 여백 사용의 장점은 버튼 요소 자체에서 직접 수행할 수 있다는 것입니다.

폼 그룹을 닫은 후 Bootsrap 형식으로 버튼별로 센터링하는 데 사용하는 전체 HTML은 다음과 같습니다.

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

사용하다text-center부트스트랩 4에 대한 상위 컨테이너의 클래스

붕괴된 navbar의 버튼에 대해서는 위의 어떤 것도 나에게 작동하지 않았습니다. 그래서 나는 내 css 파일에서..

.navbar button {
    margin:auto;
}

효과가 있었습니다!!

버튼을 부모 요소로 감아야 한다는 것입니다.

   ` <div class="text-center">
              <a href="./templatemo_558_klassy_cafe/index.html" class="btn btn- 
   outline-light me-5 ">Lavande Restaurant PH</a>`
             </div>

저에게 도움이 된 것은 ("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
}

텍스트 센터 속성을 가진 H 클래스 또는 P 클래스로 랩핑할 수도 있습니다.

이츠 이지

<div class="align-self-center mx-auto">
              <button type="button" class="btn btn-primary">
                  Click Me!
              </button>
 </div>

언급URL : https://stackoverflow.com/questions/41664991/bootstrap-4-how-do-i-center-align-a-button