웹 페이지를 디자인하는 동안 개발자는 이미지, 텍스트, 표 등을 포함한 다양한 구성 요소를 추가할 수 있습니다. 또한 여러 CSS 속성을 사용하여 div에서 텍스트를 가운데 정렬할 수 있습니다. 텍스트를 가로로 중앙에 배치하는 가장 인기 있는 방법은 ' 텍스트 정렬 ' 기인하다. 또한 ' 선 높이 ' 그리고 ' 수직 정렬 ” 텍스트를 세로로 정렬하기 위한 속성입니다.
이 게시물은 div 내부에서 텍스트를 세로 및 가로로 중앙에 배치하는 방법을 설명합니다.
div 내부에서 텍스트를 가로로 중앙에 배치하는 방법은 무엇입니까?
div 내에서 텍스트를 가로로 중앙에 배치하려면 주어진 절차를 확인하십시오.
1단계: div 컨테이너 만들기
처음에는 ' <사업부> ' 요소. 그런 다음 '를 삽입합니다. ID div 여는 태그 내부의 속성. 그런 다음 div 태그 사이에 일부 텍스트를 삽입합니다.
< 사업부 ID = '정렬 내용' >
Linuxhint는 최고의 웹 사이트 중 하나입니다 ~을 위한 콘텐츠 생성.
사업부 >
산출
2단계: div 컨테이너에 액세스하여 텍스트 중앙 정렬
이제 '의 도움으로 div 컨테이너에 액세스하십시오. ID ” 선택자가 있는 속성 이름 “ # ” 다음 CSS 속성을 적용합니다.
#align-content{너비: 80 % ;
여유: 0 자동;
패딩: 20px;
배경: #c8edf3;
텍스트 정렬: 가운데;
색상: RGB ( 49 , 열 다섯 , 240 ) ;
}
여기:
-
- “ 너비 ” 속성은 컨테이너의 너비 크기를 설정하는 데 사용됩니다.
- “ 여유 ”는 컨테이너 외부의 공백을 지정합니다.
- “ 심 ” 요소의 경계 내부 공간을 정의합니다.
- “ 배경 ” 요소의 뒷면에 배경색을 설정합니다.
- “ 텍스트 정렬 ” 속성은 텍스트 정렬을 “ 센터 '.
- “ 색상 ”는 경계 내부의 텍스트 색상을 지정합니다.
생성된 div 내에서 수평으로 정렬된 텍스트를 성공적으로 중앙에 배치한 것을 볼 수 있습니다.
div 내부에 텍스트를 세로로 가운데에 배치하는 방법은 무엇입니까?
div 컨테이너 내에서 세로로 텍스트를 중앙에 배치하려면 제공된 지침을 따르십시오.
1단계: div 컨테이너에 액세스
먼저 생성된 div 컨테이너에 접근합니다.
2단계: CSS 속성을 텍스트를 세로로 가운데에 적용
그런 다음 아래에 나열된 CSS 속성을 적용하여 div에서 텍스트를 세로로 가운데에 배치합니다.
#align-content{디스플레이: 테이블 셀;
너비: 300px;
높이: 150px;
패딩: 10px;
파란색;
배경색: rgb ( 248 , 215 , 166 ) ;
테두리: 3px 파선 #f09d03;
수직 정렬: 중간;
}
위의 코드 조각에 따르면:
-
- 설정 ' 표시하다 ' 요소의 표시 동작을 '로 지정합니다. 테이블 셀 ”, 이는 div 요소에서 테이블의 셀처럼 작동한다는 것을 의미합니다.
- “ 너비 ” 속성은 요소 너비 크기를 지정합니다.
- “ 키 ' 요소의 높이를 설정합니다.
- “ 심 ” 요소 내부의 빈 공간을 정의합니다.
- “ 색상 ”는 요소 내부의 텍스트 색상을 설정하는 데 활용됩니다.
- “ 배경색 ” 요소의 뒷면 색상을 지정합니다.
- “ 국경 ” 속성은 요소의 경계를 정의합니다.
- “ 수직 정렬 ” 속성은 “ 가운데 '.
산출
세로 및 가로 두 가지 방법으로 컨테이너 내부의 텍스트를 중앙에 배치하는 전체 절차에 대해 배웠습니다.
결론
텍스트를 div 내부의 세로 및 가로 중앙에 배치하려면 먼저