전체 웹 페이지에 걸쳐 있는 섹션에서 이미지를 수직으로 정렬하는 방법은 무엇입니까?

정렬은 텍스트, 이미지, 버튼, 콘텐츠 상자 등의 요소를 배치할 위치를 결정하는 데 중요합니다. 반응형 디자인의 핵심 구성 요소는 웹 사이트의 항목 배열입니다. 스마트폰 등 화면 크기가 작은 기기에서 웹사이트를 열면 웹사이트의 레이아웃과 구조가 미리 계획한 대로 맞춰지기 때문입니다.

그러나 이 변경 사항은 항목 사이 및 항목 내 간격은 물론 정렬 및 배치 방식에도 영향을 미칩니다. 버튼이나 양식을 클릭하거나 작성할 수 없거나, 텍스트가 올바르게 정렬되지 않으면 화면에서 텍스트의 절반이 누락될 수 있습니다.

이 글에서는 분할된 요소의 이미지를 수직으로 정렬하는 방법에 대해 설명합니다. 사진이 세로로 정렬되면 열로 구성됩니다. 이를 이미지의 수직 정렬이라고 합니다. 이미지는 텍스트나 다른 이미지 자체와 수직으로 정렬될 수 있습니다. 이는 CSS 그리드, CSS 플렉스박스, 수직 정렬 등과 ​​같은 일부 CSS 속성을 사용하여 달성할 수 있습니다.

CSS 수직 정렬 속성 사용

Vertical-align – CSS의 이 속성을 사용하여 요소의 수직 정렬을 설정합니다.

문법

으아아아

값은 다음과 같은 방식으로 사용할 수 있습니다. -

• Length - 지정된 길이만큼 요소를 위 또는 아래로 들어 올립니다

• %- 요소 올리기 또는 내리기

• 상단, 중간, 하단, 기준선 등,

• 이니셜

• 고유

예

여기에서는 vertical-align 속성을 사용하여 이미지를 텍스트와 수직으로 정렬합니다.

으아아아

CSS Flexbox 사용

CSS Flexbox와 CSS Grid를 사용하여 일련의 요소를 수직으로 정렬할 수 있습니다.

CSS Flexbox는 많은 Flex 요소를 포함하는 컨테이너입니다. 유연한 요소는 원하는 대로 행이나 열로 배열할 수 있습니다. Flex 컨테이너는 상위 요소이고 Flex 항목은 하위 요소입니다.

display:flex를 사용하면 개발자가 적절하고 매력적으로 보이도록 각 구성 요소의 스타일을 지정할 수 있습니다. 요소의 하위 요소를 행이나 열로 정렬합니다.

Flex 컨테이너에는 여러 속성이 있습니다. 아래에 언급되어 있습니다 -

• Flex-direction – 컨테이너가 Flex 구성 요소를 스택하는 방향을 나타내는 데 사용됩니다. 값 – 열, 열 반전, 행, 행 반전

• Flex-wrap – Flex 프로젝트에 래핑이 필요한지 여부를 지정하거나 결정하는 데 사용됩니다. 값 - 개행, 이제 개행

• Flex-flow – 개발자가 flex-direction과 flexwrap을 모두 지정할 수 있습니다. 값 – 행 줄 바꿈, 열 줄 바꿈 등,

• Align-items – 플렉스 항목의 정렬을 결정하는 기능

• 값 – center, flex-start, flex-end, space-around 등,

• Flex-basis - Flex 항목의 크기를 지정하는 데 사용됩니다.

• Value - 길이(cm, px, em) 또는 백분율일 수 있습니다.

• Justify-content - 플렉스 항목 정렬에도 사용됩니다.

• 값 ​​ – center, flex-start, flex-end, space-around 등,

• Flex-shrink – 숫자를 값으로 허용합니다. 항목의 값이 3이면 값이 1인 경우보다 3배만큼 줄어듭니다.

• Order - Flex 요소의 정렬 순서를 지정합니다.

예

으아아아

CSS 그리드 사용

개발자가 그리드 기반 행 및 열 레이아웃 시스템을 구축할 수 있는 CSS 그리드 기능 덕분에 부동 및 위치 지정을 사용하지 않고도 웹 페이지를 구축하기가 더 쉽습니다. 그리드 컨테이너는 상위 요소입니다. 디스플레이: 그리드는 요소를 그리드로 만드는 데 사용됩니다.

일부 CSS 그리드 속성은 다음과 같습니다 -

• Grid-template-columns – 열을 만드는 데 사용됩니다. 이 값은 길이, % 등으로 표현됩니다.

• Grid-template-rows – 행을 만드는 데 사용됩니다. 값은 길이, % 등의 형태로 표현됩니다.

• Grid-gap - 열 간격과 행 간격을 나타내는 약칭 속성입니다.

예

으아아아

결론

이 기사에서는 전체 웹 페이지에 걸쳐 있는 섹션의 이미지를 수직으로 정렬하는 다양한 방법에 대해 논의했습니다.

위 내용은 전체 웹 페이지에 걸쳐 있는 섹션에서 이미지를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!