CSS에서 객체를 중앙에 배치하는 것은 웹 페이지 디자인에서 좋은 표현을 얻는 데 필수적입니다. 웹 개발자는 디자인에서 요소를 중앙에 배치하는 최적의 방법을 찾는 데 어려움을 겪는 경우가 많습니다. 다행히도 객체의 크기나 위치에 관계없이 화면에서 수평 및 수직으로 객체를 중앙에 배치할 수 있는 몇 가지 CSS 기법이 있습니다. 이 글에서는 CSS에서 객체를 중앙에 배치하는 다양한 방법과 이를 웹 프로젝트에 적용하는 방법을 살펴보겠습니다.
CSS로 중앙에 무언가를 배치하는 방법은?
CSS에서 객체를 중앙에 배치하는 것은 웹 페이지 디자인에서 매우 일반적인 작업입니다. 이미지, 텍스트 또는 기타 요소를 화면 중앙이나 특정 컨테이너에 배치하고 싶을 때가 있습니다. 이를 위해 여러 CSS 속성을 사용할 수 있습니다.
CSS에서 요소를 가운데 정렬하는 데 가장 많이 사용되는 속성은 다음과 같습니다. 한계요소를 가로로 가운데 정렬하려면 왼쪽 여백과 오른쪽 여백을 같은 크기로 설정하면 됩니다. 예를 들면 다음과 같습니다.
.centrado {
margin: 0 auto;
}
이 예에서 ".centered" 클래스는 위쪽과 아래쪽 여백을 0으로 설정하고, 왼쪽과 오른쪽 여백을 자동으로 설정합니다. 이렇게 하면 요소가 가로로 가운데 정렬됩니다.
요소를 수직으로 가운데 정렬하려면 속성을 사용할 수 있습니다. 디스플레이 y 항목 정렬 전체적으로. 예를 들어:
.centrado {
display: flex;
align-items: center;
}
이 경우 ".centered" 클래스는 다음을 갖습니다. 디스플레이 "flex"와 항목 정렬 "중앙"에서. 이렇게 하면 요소가 세로로 가운데에 배치됩니다.
요소를 수직으로 가운데 정렬하는 또 다른 옵션은 속성을 사용하는 것입니다. 위치 y 변환. 예 :
.centrado {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
이 예에서 클래스 ".centered"는 다음을 갖습니다. 위치 "절대"에서 상단 y 왼쪽 (left) 50% 및 변환 이렇게 하면 요소가 위쪽과 왼쪽으로 50% 이동하여 수평 및 수직으로 모두 가운데에 배치됩니다.
이러한 도구를 사용하면 원하는 요소를 화면 중앙이나 특정 컨테이너에 배치할 수 있습니다.
HTML에서 객체를 가운데에 정렬하는 방법은?
HTML에서 객체를 가운데 정렬하려면 먼저 객체를 컨테이너로 감싸야 합니다. 이 컨테이너는 DIV하는 기간 또는 콘텐츠를 그룹화할 수 있는 다른 요소입니다.
그런 다음 컨테이너 내에서 객체를 중앙에 배치하려면 속성을 사용할 수 있습니다. 텍스트 정렬 CSS를 사용하여 설정 센터:
이 예에서 우리는 다음을 생성했습니다. DIV 그리고 우리는 그것에 속성을 적용했습니다 텍스트 정렬 용기있게 센터컨테이너 내부에는 컨테이너에 적용된 속성 덕분에 자동으로 중앙에 정렬되는 이미지를 배치했습니다.
HTML에서 객체를 가운데에 배치하는 또 다른 방법은 속성을 사용하는 것입니다. 한계이를 위해서는 다음과 같은 값을 설정해야 합니다. 자동 왼쪽과 오른쪽 여백 모두에 대해:
이 경우에는 속성을 적용했습니다. 한계 컨테이너에 값을 설정했습니다. 0 상단 및 하단 여백의 경우 자동 왼쪽과 오른쪽 여백을 설정합니다. 이렇게 하면 컨테이너 내에서 객체가 자동으로 가운데에 배치됩니다.
CSS를 사용하여 이미지를 중앙에 배치하려면 어떻게 해야 하나요?
CSS를 사용하여 이미지를 중앙에 배치하는 것은 복잡한 작업처럼 보일 수 있지만 실제로는 매우 간단합니다.
이미지를 수평으로 중앙에 배치하려면 다음 속성을 사용할 수 있습니다. 텍스트 정렬 그리고 그 값을 다음과 같이 설정합니다. 센터. 예 :
img{
텍스트 정렬: 센터;
}
이렇게 하면 이미지가 해당 이미지를 담고 있는 컨테이너의 중앙에 정렬됩니다.
이미지를 가로와 세로 모두 중앙에 배치하려면 여러 속성을 조합하여 사용할 수 있습니다. 먼저, 속성을 사용하여 컨테이너를 플렉스박스로 설정합니다. 디스플레이 용기를 가지고 구부리 다. 그런 다음 속성을 사용합니다. 정당화 내용 y 항목 정렬, 둘 다 값을 가지고 있습니다 센터. 예 :
.컨테이너 {
디스플레이: 몸을 풀다;
justify-content: 센터;
정렬 항목: 센터;
}
이렇게 하면 이미지가 컨테이너의 수평, 수직 중앙에 배치됩니다.
이러한 간단한 단계를 거치면 CSS를 사용하여 모든 이미지를 중앙에 배치하고 디자인을 보다 전문적이고 매력적으로 만들 수 있습니다.
CSS를 사용하여 상자를 가운데에 배치하는 방법은?
CSS를 사용하여 상자를 가운데 정렬하는 것은 웹 디자인에서 매우 흔한 작업입니다. 다행히 속성을 사용하면 간단한 작업입니다. 한계 가치와 함께 자동이 작업은 상자의 유형에 따라 여러 가지 방법으로 수행할 수 있습니다.
고정 너비 상자
상자의 너비가 고정되어 있는 경우 속성을 사용하여 쉽게 가운데에 배치할 수 있습니다. 한계 가치 자동. 예 :
이 예에서 상자의 너비는 200픽셀이고 높이는 200픽셀입니다. 속성 한계 로 설정 0 개 자동그러면 상자가 컨테이너의 중앙에 수평으로 배치됩니다.
가변폭 상자
상자의 너비가 가변적이라면 속성을 사용할 수 있습니다. 디스플레이 함께있는 한계 중앙에 배치합니다. 예:
이 예에서 상자는 가변 너비를 갖습니다(다음으로 설정됨) 50%) 및 높이 200픽셀. 속성 디스플레이 로 설정 인라인 블록이를 통해 속성을 사용하여 컨테이너에서 상자를 수평으로 중앙에 배치할 수 있습니다. 한계 와 0 개 자동.
절대 상자
상자가 절대적이면 속성을 사용할 수 있습니다. 상단, 연락해주세요, 바닥 y 왼쪽 (left) 함께있는 한계 중앙에 배치합니다. 예:
이 예에서 상자는 절대적이며 속성이 사용됩니다. 변환 컨테이너의 수직 및 수평 중앙에 배치합니다. 속성 상단 로 설정 50% 그리고 재산 왼쪽 (left) 로 설정 50% 상자를 용기 중앙에 놓으세요. 그런 다음 속성 변환 상자를 왼쪽 위로 절반 크기로 이동하여 컨테이너의 중앙에 배치하는 데 사용됩니다.
약간의 연습만 하면 어떤 상자든 용기의 완벽한 중앙에 놓을 수 있습니다.