이 문서는 CSS를 사용하는 실제 예제와 함께 div의 올바른 정렬을 보여줍니다.
CSS를 사용하여 div를 오른쪽 정렬하는 방법은 무엇입니까?
개발자는 웹 사이트를 더욱 매력적으로 만드는 방식으로 각 div 요소 또는 이미지를 오른쪽 정렬할 수 있습니다. 높은 유연성으로 인해 div 요소는 페이지 섹션 정의, 열 생성 및 관련 콘텐츠 세트 래핑과 같은 웹 페이지에서 여러 가지 방식으로 활용될 수 있습니다.
아래 방법에 따라 div를 오른쪽 정렬합니다.
방법 1: 'float' 속성 사용
HTML 파일에서 div를 만들고 ' 오른쪽 정렬 '. 이 클래스와 div는 이 문서 전체에서 사용됩니다.
< 사업부 수업 = '오른쪽 정렬' >
< 피 > 이것은 일부 내용입니다. < / 피 >
< / 사업부 >
이제 해당 div 클래스 '를 선택하십시오. 오른쪽 정렬 ” CSS 속성을 할당합니다. 이러한 속성은 더 나은 시각화를 위해 활용됩니다.
.오른쪽으로 정렬 {
플로트: 오른쪽;
패딩: 10px;
배경- 색상 : 핫 핑크;
}
위의 코드에서 ' 뜨다 ” 속성이 오른쪽으로 설정됩니다. 웹 페이지에서 올바른 방향으로 div를 떠다니거나 이동합니다. 패딩 및 배경색 속성은 ' 10px ' 그리고 ' 핫 핑크 ” 각각.
위의 코드 스니펫을 컴파일하면 웹 페이지가 다음과 같이 표시됩니다.
위의 출력은 div가 올바른 방향으로 이동함을 확인합니다.
방법 2: 'right' 속성 사용
CSS에서 div 클래스를 선택하고 ' 오른쪽 ” 속성을 0으로 설정합니다. 오른쪽에서 선택한 div의 거리가 0이 되도록 합니다. 그런 다음 ' 위치 ” 속성을 “ 순수한 ” div 위치를 고정합니다. 마지막으로 더 나은 시각화를 위해 몇 가지 스타일 속성을 적용합니다.
.오른쪽으로 정렬{
오른쪽: 0 ;
위치: 절대;
패딩: 10px;
배경- 색상 : 미디엄 퍼플;
}
코드를 실행한 후 웹페이지는 다음과 같습니다.
출력은 이제 div가 오른쪽 정렬되었음을 보여줍니다.
방법 3: Flex 레이아웃 사용
Flex는 가장 효율적인 방법이며 창 크기를 조정하는 동안 레이아웃을 유지합니다. div는 CSS '를 사용하여 오른쪽 정렬할 수 있습니다. 플렉스 레이아웃 ' 속성. Flex 레이아웃에는 다양한 목적을 위한 많은 속성이 포함되어 있습니다.
HTML 파일에서 부모 div를 만들고 그 안에 두 개의 형제 div를 만듭니다. 또한 각 div에 고유한 클래스를 할당합니다.
< 사업부 수업 = '오른쪽 정렬' >< 사업부 수업 = '왼쪽 정렬' >
< 피 >이건 좀 더 콘텐츠 .< / 피 >
< / 사업부 >
< 사업부 수업 = '오른쪽 정렬' >
< h1 >Linuxhint에서 안녕하세요 < / h1 >
< / 사업부 >
< / 사업부 >
이제 ' <스타일> ” 태그는 다음 CSS 속성을 추가합니다.
.오른쪽으로 정렬 {디스플레이: 플렉스;
신이 옳다고 하다- 콘텐츠 : 사이에 공백;
}
.오른쪽 정렬 {
align-self: 플렉스 엔드;
패딩: 10px;
배경- 색상 : 미디엄 퍼플;
}
위의 코드에서
- 할당 ' 몸을 풀다 ' 및 '사이 공백' 값을 ' 표시하다 ' 그리고 ' 정당화-내용 ” 속성, 각각. 이러한 속성은 div를 유연하게 만들고 하위 div 사이에 동일한 간격을 둡니다.
- “ 정렬 자체 ” 속성이 “로 설정됨 플렉스 엔드 ”, 컨테이너의 오른쪽에 정렬됩니다.
위의 코드를 실행한 후 웹 페이지는 다음과 같습니다.
출력은 div가 flex 레이아웃을 사용하여 오른쪽 정렬되었음을 보여줍니다.
방법 4: 그리드 레이아웃 사용
그리드 레이아웃을 활용하여 div를 오른쪽 정렬할 수도 있습니다. HTML 코드 구조는 동일하게 유지됩니다.
.오른쪽으로 정렬 {디스플레이: 그리드;
그리드-템플릿-열: 반복 ( 2 , 1금 ) ;
}
.오른쪽 정렬 {
그리드-열- 시작 : 2 ;
패딩: 10px;
배경- 색상 : 청록색;
}
코드에 대한 설명은 다음과 같습니다.
- 먼저 상위 div 클래스 '를 선택합니다. .오른쪽으로 정렬 '를 설정하고 ' 표시하다 ” 속성을 “ 그리드 '.
- 그런 다음 '를 사용하여 동일한 크기로 두 개의 열을 만듭니다. 그리드 템플릿 열 ' 로 설정 ' 반복(2, 1fr) '.
- 마지막으로 하위 div 클래스 '를 선택합니다. .오른쪽 정렬 ”를 설정하고 “ 그리드 열 시작 ” 속성을 2로 설정합니다. 이 속성은 두 번째 열, 즉 오른쪽부터 요소를 시작합니다.
위의 코드를 실행하면 웹 페이지는 다음과 같습니다.
출력은 div가 이제 ' 그리드 ” 레이아웃 속성.
결론
div를 올바른 방향으로 정렬하려면 ' 뜨다 ”, “ 오른쪽 ”, “ 플렉스 레이아웃 ', 그리고 ' 그리드 레이아웃 ' 속성. “ 뜨다 ” 속성은 값을 할당하여 오른쪽으로 설정합니다. 0px '. '를 위해 몸을 풀다 ” 속성을 사용하려면 디스플레이를 flex로 설정하고 “ 정렬 자체 ” 속성을 “ 플렉스 엔드 '. grid 속성을 사용하여 두 개의 동일한 크기의 열을 만들고 하위 div가 두 번째 열에서 시작하도록 합니다.