Programming > CSS

label (라벨)내 테스트 세로 가운데 정렬하기

#css

label 에 vertical align 을 중앙 (center, middle) 로 설정하기

1) line-height 를 라벨의 높이와 동일하게 설정한다.

.label {
     display: inline-block;  /* size세팅을 위해 설정 */
     height: 40px;         /* 높이를 40px 로 */
     width: 100px;
     text-align: center;  /* 가로(수평) 방향 중앙을 설정 */
     line-height: 40px;   /* 문자열의 기준을 라벨의 높이와 동일하게 설정한다 */
}

2) flex 를 사용해서 정렬한다.

.label {
     height: 40px;
     width: 100px;
     display: flex;                   /* flex or inline-flex  설정 */
     justify-content: center;  /* 가로(수평) 방향 중앙을 설정 */
     align-items: center;        /* 세로(수직) 방향 중앙을 설정 */
}