중앙 항목을 v-Flex로 시각화

중앙 항목을 v-Flex로 시각화

A의 중심을 잡으려고 한다.<v-btn>a로<v-flex>.이후<v-flex>flexbox div, I usejustify-center로 변형된.

justify-content: center

내 방향이 수평이기 때문에 단추가 가운데 정렬되어야 하는데 안 맞네.여기 내 문제를 재현하는 코데펜이 있다.

https://codepen.io/anon/pen/ZXLzex

div(v-flex) 안쪽 중앙에 버튼을 등록하고 싶다.

다음은 전체 코드:

 <v-card>
    <v-card-text >
          <v-text-field label="Email"></v-text-field>
          <v-text-field label="Password"></v-text-field>
    </v-card-text>

    <v-card-actions>
        <v-layout row>
          <v-flex justify-center>
            <v-btn primary>
              Signup
            </v-btn>
          </v-flex>
        </v-layout>
    </v-card-actions>
  </v-card>

단추를 안으로 싸다<div class="text-xs-center">

<div class="text-xs-center">
  <v-btn primary>
    Signup
  </v-btn>
</div>

Dev는 그것을 예시에 사용한다.

---

단추의 중앙 집중화용v-card-actions우리는 추가할 수 있다.class="justify-center"(v2 클래스의 참고는text-center(따라서 없는)xs):

<v-card-actions class="justify-center">
  <v-btn>
    Signup
  </v-btn>
</v-card-actions>

코데펜

---

센터링과 관련된 자세한 예는 여기를 참조하십시오.

<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>
  </v-card-actions>
</v-layout>

v-Flex에 디스플레이 플렉스가 없음!브라우저에서 v-Flex를 검사하면 단순한 블록 분할에 불과하다는 것을 알게 될 것이다.

그러니, 당신은 그것을 무효로 해야 한다.display: flexHTML 또는 CSS를 사용하여 정당성-내용과 함께 작동하도록 하십시오.

참조URL: https://stackoverflow.com/questions/46404884/vuetify-center-items-into-v-flex