Jam's story
[CSS] 내부의 p 태그 글씨들을 수직/수평정렬 본문
글씨가 수직/수평정렬하게
1번째방법: height 지우고 padding 속성사용
padding: 70px 0;
hello world!
2번째 방법 : line height 이용
-> height와 line hegiht를 동일한 값으로 준다.
.center{
width:50%;
border:3px solid green;
margin:0 auto;
text-align: center;
이부분 2개 추가
height: 200px;
line-height: 200px;
}
.center p{
line-height:1.5;
display:inline-block;
vertical-align:middle;
}
hello world!
3번째 방법 : transform 변형시킨다. () 원점 변형
transform : trnaslate (x축기준 이동시킬 값 , y축 기준 이동 시킬 값)
.center p{
margin:0;
top:50%;
left:50%;
/* p는 블럭보드라서 width:가 100퍼인데 앱솔루트를 하면 컨텐츠만큼 줄어든다. */
position:absolute;
border:1px solid red;
/* 너비의 반을 왼쪽 이동, 높이의 반을 윗쪽이동 */
transform: translate(-50%, -50%);
/* 마이크로소프트사 에서 작동하기위해 */
-ms-transform: translate(-50%, -50%);
line-height:1.5;
display:inline-block;
vertical-align:middle;
}
hello world!
4번째 방법 : flexbox 를 이용
justify는 축의 방향, align은 축의 수직방향
.center{
width:50%;
border:3px solid green;
margin:0 auto;
text-align: center;
height: 200px;
width:400px;
display:flex;
justify-content: center;
align-items: center;
}
vertical-align: middle;
값설명
middle | 요소는 상위 요소의 중간에 배치됩니다. |
bottom | 요소는 라인의 가장 낮은 요소와 정렬됩니다. |
text-bottom | 요소는 상위 요소의 글꼴 하단에 맞춰 정렬됩니다. |
initial | 이 속성을 기본값으로 설정합니다. 초기에 대해 읽기 |
'WEB > CSS' 카테고리의 다른 글
[CSS] 의사클래스 (0) | 2022.05.24 |
---|---|
[CSS] 선택자 혹은 결합자 (0) | 2022.05.24 |
[CSS] css레이아웃 수평정렬 수직정렬 (0) | 2022.05.24 |
[CSS] form 양식 2 (0) | 2022.05.24 |
[CSS] 로그인 form 양식 (0) | 2022.05.24 |