Jam's story

[CSS] 내부의 p 태그 글씨들을 수직/수평정렬 본문

WEB/CSS

[CSS] 내부의 p 태그 글씨들을 수직/수평정렬

애플쩀 2022. 5. 24. 14:19

 글씨가 수직/수평정렬하게 

 

1번째방법: height 지우고 padding 속성사용 

padding: 70px 0;
Insert title here

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;

}
Insert title here

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;

}
Insert title here

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
Comments