Vuetify-중앙에 텍스트가있는 정사각형 V 카드 만들기 (양쪽 축)
G. 국물
정사각형 중앙 중앙에 카드 텍스트가있는 v- 카드를 만들려고합니다. v-spacer 및 vuetify와 함께 제공되는 다른 CSS 클래스를 사용해 보았지만 안타깝게도 텍스트가 수평 중앙에 유지되는 동안 수직 중앙에도 문제가 있습니다.
이 코드는 중간 텍스트의 세로 중심을 제외하고 거의 모든 것이 작동합니다.
<v-container fluid>
<v-row>
<v-col cols="6" sm="4">
<v-card rounded color="info">
<v-responsive aspect-ratio="1">
<v-card-title>
Top left - correct
</v-card-title>
<v-card-text class="text-center white--text">
middle center
</v-card-text>
<v-card-actions class="justify-center white--text">
bottom center
</v-card-actions>
</v-responsive>
</v-card>
</v-col>
</v-row>
</v-container>
다음은 예제가있는 JS 바이올린입니다. https://jsfiddle.net/mrpquke4/3/
위의 예를 사용하여 브라우저 창 크기를 조정하면 v-card가 정사각형 모양을 유지하면서 늘어나거나 줄어들고 (원하는대로) 텍스트가 수평으로 중앙에 유지되고 (원하는대로) 텍스트가 수직으로 중앙에 있지 않습니다 (문제).
JSFiddle :
원하는 결과 :
Syed
이 CSS를 사용하십시오.
.v-responsive__content {
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center; // this will make everything vertical center
justify-content: space-between
}
.v-responsive__content > div {
width: 100%;
}
CSS 충돌에 대해 클래스 이름 공간을 지정할 수 있습니다.
.my-card .v-responsive__content { ... }
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
간격이 추가 된 vuetify 그리드에서 n 양의 v-col 중앙
- 2
Vuetify에서 반응 형 카드 그리드 만들기
- 3
"상단"축에서 각진 축 텍스트 양쪽 맞춤
- 4
CSS에서 투명하게 만들기 위해 div의 한쪽 모서리 만 정사각형으로 만드는 방법은 무엇입니까?
- 5
다양한 정사각형 크기의 체스 판 만들기
- 6
CSS에서 오른쪽 정렬 된 텍스트를 사용하여 다양한 크기의 이미지 크기 조정 및 중앙 정렬
- 7
CSS : HTML은 양식 중앙에 정렬되지만 레이블과 범례는 왼쪽에 정렬됩니다.
- 8
양쪽에 반복되는 패턴이있는 중앙 타원형 모양
- 9
양쪽에 반복되는 패턴이있는 중앙 타원형 모양
- 10
축이 중앙에 정렬 될 때 그리드 선을 만드는 방법은 무엇입니까?
- 11
텍스트가 상단 또는 중앙에 텍스트 왼쪽에이 이미지를 만드시겠습니까?
- 12
중앙에있는 개체에 왼쪽 텍스트를 정렬하는 방법
- 13
각 문자의 양쪽에 '+'기호가있는 경우 테스트 문자열
- 14
Vuetify와 수직 중앙 이미지에서 동일한 높이의 v-col을 만드는 방법은 무엇입니까?
- 15
높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?
- 16
카드보기에서 왼쪽 스 와이프 사용 중지
- 17
텍스트 바인딩에 따라 크기가 커질 수있는 pdf 형식의 텍스트 필드를 만들 수 있습니까?
- 18
왼쪽 브랜드, 중앙 검색 양식 및 왼쪽 드롭 다운이있는 반응 형 탐색 메뉴
- 19
mousemove 이벤트로 그리드에 사각형 만들기
- 20
CSS는 날카로운 정사각형 가장자리로 한쪽에 테두리를 만듭니다.
- 21
양쪽 축에 ggplot2 주석 달기 : 텍스트의 위치가 계속 변경됨
- 22
요소 내부에서 오른쪽으로 당기기를 사용하면 텍스트가 중앙에 정렬됩니다. 기준선에 맞추는 방법
- 23
Vuetify v-menu 구성 요소에서 삼각형 포인터를 어떻게 만들 수 있습니까?
- 24
"Windows와 유사한"단축키가있는 콘솔 텍스트 편집기 (CTRL + A, -C, -X, -V, Shift + End, Shift + Up ...)
- 25
OpenCV, C ++에서 정사각형 비 네트 만들기
- 26
정사각형 행렬에서 R로 히트 맵 만들기
- 27
일종의 상자에 그 모양을 함께 연결하는 왼쪽 및 오른쪽 삼각형을 만드는 데 문제가 있습니다.
- 28
ggplot2를 사용하여 R에서 2-y 축 차트의 양쪽 축에 천 구분 기호를 추가하는 방법
- 29
모든 화면에 대해 여러 텍스트보기를 중앙 및 유사한 왼쪽 정렬에 정렬
몇 마디 만하겠습니다