Vuetify, 콘텐츠를 중앙에 배치하고 열을 늘리는 방법

debugcn 에 게시 Dev

내뚫다

2 개의 열이있는 레이아웃을 만들려고합니다. 높이가 같고 내부 내용이 세로로 중앙에 배치되어야합니다.

다음은 vuetify의 코드입니다.

<div id="app">
  <v-app>
    <v-row align="center">
      <v-col cols=6 style="background-color: #FF5000;"  align="center">
           <v-btn class="m">Column 1</v-btn>
      </v-col>
      <v-col cols=6 style="background-color: #5fc3c7;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </v-col>
    </v-row>
  </v-app>
</div>

내가 변화 시도 <v-row align="center">에 <v-row align="stretch">열 내가 원하는대로 스트레치하지만 내용이 중심되지 않습니다 ..

어떤 도움이라도 좋을 것입니다

Blackraspberryyy

으로 Tingsen 쳉이 언급 한, 당신은 당신의 플렉스 스타일을 추가 할 수 있습니다 v-col수직 중심을 달성하기 위해. 또한 Vuetify 2.3.10부터는 레이아웃을 쉽게 제어 할 수있는 유틸리티 클래스를 제공 하는 flex 도우미 를 사용할 수 있습니다 .

따라서 inline을 사용하는 대신 style다음과 같이 사용할 수 있습니다.class="d-flex justify-center align-center"

<v-row align="stretch">
  <v-col 
    cols="6"
    style="background-color: #FF5000;"
    class="d-flex justify-center align-center"
  >
    <v-btn>...</v-btn>
  </v-col>
  <v-col cols="6" style="background-color: #5fc3c7;">...</v-col>
</v-row>

다음은 codesandbox 의 데모 입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

Vuetify, 콘텐츠를 중앙에 배치하고 열을 늘리는 방법

Vuetify, 콘텐츠를 중앙에 배치하고 열을 늘리는 방법

Bootstrap 3의 열 내에서 콘텐츠를 중앙에 배치하는 방법

여백 속성을 사용하지 않고 div 내에서 콘텐츠를 중앙에 배치하는 방법

Flexbox에 콘텐츠를 중앙에 배치하는 방법

콘텐츠 중간에 양식을 중앙에 배치하는 방법

scrollToItemAtIndexPath를 사용하여 UICollectionView에서 콘텐츠 오프셋으로 셀을 중앙에 배치하는 방법

Bootstrap을 사용하여 div의 콘텐츠를 중앙에 배치하는 방법

레이블에서 콘텐츠를 중앙에 배치하는 방법

navbar의 모든 콘텐츠를 한 줄에 중앙에 배치하는 방법

div의 모든 콘텐츠를 중앙에 배치하고 콘텐츠 간의 거리를 동일하게 유지하는 방법

CSS-고정 사이드 바 div를 중앙 콘텐츠 div에 상대적으로 배치하는 방법

Flutter 및 Firebase : 배열을 채우고 나중에 모든 콘텐츠를 반환하는 방법

버튼 템플릿의 콘텐츠를 중앙에 배치하고 마우스 이벤트를 빈 영역에 유지하는 방법

콘텐츠를 정사각형 div로 중앙에 배치하고 bootstrap.css로 종횡비를 유지하는 방법은 무엇입니까?

React-Material-UI Accordion : 머리글을 중앙에 배치하고 아이콘을 확장하는 방법

내 Bootstrap 열이 콘텐츠를 중앙에 배치하지 않는 이유는 무엇입니까?`

<sup> 2 </ sup> 태그 사이의 콘텐츠를 추출하고 해당 콘텐츠를 별도의 배열에 넣는 방법

CSS를 사용하여 아이콘을 중앙에 배치하는 방법

AppBarLayout에서 로고를 중앙에 배치하는 방법

Vuetify에서 구성 요소 내부의 콘텐츠를 정렬하는 방법은 무엇입니까?

자동 레이아웃을 사용하는 작업에서 UIScrollView에서 콘텐츠 크기를 자동으로 늘리는 방법은 무엇입니까?

파이썬에서 바이너리 이미지의 콘텐츠 / 객체를 중앙에 배치하는 방법은 무엇입니까?

헤더를 h1로 중앙에 배치하고 배경을 제거하는 방법

열 사이에 테두리가있는 열에 콘텐츠를 배포하는 방법 (워드 프레스)

iframe (Google Map)의 콘텐츠를 가로로 중앙에 배치하는 방법은 무엇입니까? 작동하지 않는 일반적인 방법

콘텐츠 위에서 페이드 인하는 중앙 div를 추가하는 방법은 무엇입니까?

계산에 헤더를 포함하여 Stack.Screen 내에서 콘텐츠를 세로로 중앙에 배치하는 방법은 무엇입니까?

Android : 레이아웃의 중력이 고정되었을 때 개별 뷰를 중앙에 배치하는 방법

브라우저에서 열 때 고정 헤더 또는 탐색 아래에 콘텐츠를 배치하는 방법은 무엇입니까?

Qml의 중앙에 콘텐츠를 표시하는 방법은 무엇입니까?