[css] Bootstrap 4, 버튼을 중앙 정렬하려면 어떻게합니까?

Program / 글쓴이 
<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;부모 요소에 적용하는 사용자 지정 클래스에 정의 된 것은 사용중인 부트 스트랩 버전에 관계없이 작동합니다. 그리고 그것이 정확히 .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>

스 니펫 확장

중앙에 배치 할 콘텐츠가 block 또는 flex (아님 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-width-content

답변

다음은 폼 그룹을 닫은 후 Bootsrap 폼의 가운데 단추로 사용하는 전체 HTML입니다.

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

답변

부트 스트랩 4 유틸리티를 사용하면 가로 여백을 ‘자동’으로 설정하여 요소 자체를 가로 중앙에 배치 할 수 있습니다.

가로 여백을 자동으로 설정하려면을 사용할 수 있습니다 mx-auto. 은 m마진을 지칭하고,는 x(+ 좌우) X 축 참조되며 auto설정을 참조한다. 따라서 이것은 왼쪽 여백과 오른쪽 여백을 ‘자동’설정으로 설정합니다. 브라우저는 여백을 동일하게 계산하고 요소를 중앙에 배치합니다. 설정은 블록 요소에서만 작동하므로 display : block을 추가해야하며 부트 스트랩 유틸리티를 사용하면 d-block.

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

이 답변에 따라 모든 브라우저가 자동 여백 설정을 완전히 지원하는 것으로 간주 할 수 있습니다. 여백에 대한 브라우저 지원 : 자동 이므로 사용하는 것이 안전합니다.

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

답변

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

답변

축소 된 navbar의 버튼에 대해 위의 아무것도 나를 위해 일하지 않았으므로 내 CSS 파일에서 …….

.navbar button {
    margin:auto;
}

그리고 그것은 작동했습니다!!