Bulma Framework에서 열의 항목을 가로로 가운데로 맞 춥니 다

Question

콘텐츠를 Bulma 열의 가운데에 가로로 배치하고 싶습니다. 나는 'columns'의 DIV에 그 'class="column is-2"' 중심 싶습니다

http://prntscr.com/hooo8l

:

다음은 예입니다.

<div class="columns is-vcentered"> 
    <div class="column is-three-fifths is-offset-one-fifth has-text-centered"> 
     <div class="columns is-desktop is-vcentered"> 
      <div class="column is-2"> 
        <button mat-raised-button color="primary" (click)="initTimer()"> 
         <mat-icon>play_arrow</mat-icon> 
         Start Timer 
        </button> 
      </div> 

그리고 즉-2 내부의 버튼을 중심 싶습니다 : 내 코드가 시작하는 방법

는 여기에 있습니다.

도움을 주시면 감사하겠습니다. 감사합니다.

Answer 1

당신이 그들의 용기와 사용 가능한 공간 내에서 컨테이너 내의 버튼을 가운데 정렬하고 싶은 경우, 이것은 당신이 다음을 수행 할 것입니다 : 이것은 무엇이다

<div class="columns is-centered"> 
    <div class="column has-text-centered is-2"> 
    <a class="button">Button 1</a> 
    </div> 
    <div class="column has-text-centered is-2"> 
    <a class="button">Button 2</a> 
    </div> 
    <div class="column has-text-centered is-2"> 
    <a class="button">Button 3</a> 
    </div> 
    <div class="column has-text-centered is-2"> 
    <a class="button">Button 4</a> 
    </div> 
</div> 

JS Fiddle example

희망 당신 의미.