logo

TechCodeview

CSS의 수직 정렬

CSS에서 수직 정렬 속성은 포함 요소 내의 인라인 수준 요소 또는 테이블 셀의 수직 정렬을 제어합니다. 이는 텍스트 줄의 일부이거나 인라인 블록 또는 테이블 셀로 표시되는 요소에 적용됩니다.

'vertical-align' 속성은 일반적으로 이미지, 텍스트와 같은 인라인 요소 또는 텍스트 줄 내의 인라인 블록 요소에 사용됩니다. 블록 수준 요소에는 직접 적용되지 않습니다. 그러나 Flexbox나 위치 지정과 같은 기술을 사용하여 수직으로 정렬할 수 있습니다.

통사론:

수직 정렬 속성의 기본 구문은 다음과 같습니다.

 selector { vertical-align: value; }

'값'은 다음 옵션 중 하나일 수 있습니다.

rhel 대 센토스
    기준:요소의 기준선을 상위 요소의 기준선에 맞춥니다. 이는 대부분의 요소에 대한 기본값입니다.보결:요소의 기준선을 상위 요소 글꼴의 아래 첨자 기준선에 맞춥니다.감독자:요소의 기준선을 상위 요소 글꼴의 위 첨자 기준선에 맞춥니다.맨 위:요소의 상단을 라인 상자 내의 라인에서 가장 높은 요소의 상단과 정렬합니다.텍스트 상단:요소의 상단을 상위 요소 글꼴의 상단에 맞춥니다.가운데:상위 요소를 기준으로 요소를 수직 중앙에 배치합니다.맨 아래:요소의 하단을 라인 상자 내 라인의 가장 낮은 요소의 하단과 정렬합니다.텍스트 하단:요소의 아래쪽을 상위 요소 글꼴의 아래쪽에 맞춥니다.백분율:요소는 줄 높이의 지정된 비율로 수직으로 정렬됩니다. 예를 들어, 수직 정렬: 50%는 요소를 상위 요소 내에서 수직으로 가운데에 배치합니다.

참고: '수직 정렬'은 요소 유형과 사용되는 컨텍스트에 따라 특정 동작을 가지므로 그 효과가 항상 간단하지는 않을 수 있습니다. 인라인 요소를 텍스트 또는 기타 인라인 요소와 정렬하는 데 특히 유용합니다.

예

다음은 CSS의 'vertical-align' 속성과 관련된 몇 가지 자세한 내용과 예입니다.

1. 기준선 정렬:

    수직 정렬 기준선값은 요소의 기준선을 상위 요소의 기준선에 맞춥니다. 이는 대부분의 인라인 수준 요소에 대한 기본 동작입니다.

기준선 기타 텍스트

2. 아래 첨자와 위 첨자:

    수직 정렬:하위 값은 요소의 기준선을 상위 요소 글꼴의 아래 첨자 기준선과 정렬하여 아래 첨자로 표시되도록 합니다. 반면에,수직 정렬:Super는 요소의 기준선을 상위 요소 글꼴의 위 첨자 기준선에 맞춰 정렬합니다.

시간2O는 물이다. 엑스2+ 및2= r2

3. 상단 및 하단 정렬:

    수직 정렬:상단 값은 요소의 상단을 라인 상자 내 라인의 가장 높은 요소의 상단과 정렬합니다. 비슷하게,수직 정렬:하단은 요소의 하단을 라인 상자 내 라인의 가장 낮은 요소의 하단과 정렬합니다.

위쪽 정렬 하단 정렬

4. 중간 정렬:

데이터베이스의 정규화
    수직 정렬:중간 값은 상위 요소를 기준으로 요소를 세로 중앙에 배치합니다. 이는 텍스트 내의 아이콘이나 이미지를 중앙에 배치하는 데 자주 사용됩니다.

이 아이콘은 세로 중앙에 있습니다. 상

5. 텍스트 상단 및 텍스트 하단 정렬:

    수직 정렬:Text-top 값은 요소의 상단을 상위 요소의 글꼴 상단과 정렬합니다.수직 정렬:Text-bottom은 요소의 아래쪽을 상위 요소 글꼴의 아래쪽에 정렬합니다.

텍스트 상단 정렬 텍스트 하단 정렬

6. 백분율 정렬:

수직 정렬과 함께 백분율 값을 사용하면 요소를 특정 선 높이 백분율로 수직으로 정렬할 수 있습니다. 예를 들어, 수직 정렬: 50%는 요소를 줄 높이의 절반에 중앙에 배치합니다.

수직 중앙에 위치

7. 블록 수준 요소의 수직 중심 맞추기:

블록 수준 요소를 상위 요소 내부에 수직으로 중앙에 배치하려면 Flexbox 또는 그리드 레이아웃을 사용할 수 있습니다.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ }

8. 요소 높이를 알 수 없는 수직 센터링:

수직으로 중앙에 배치하려는 요소의 높이를 모르는 경우 위치와 변환을 조합하여 사용할 수 있습니다.

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

9. 여러 줄의 텍스트를 사용한 세로 중심 맞추기:

컨테이너 내에서 여러 줄의 텍스트를 수직으로 중앙에 배치하려면 Flexbox와 의사 요소의 조합을 사용할 수 있습니다.

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; }

10. 종횡비가 다른 컨테이너 내 이미지의 수직 중심 맞추기:

명세서 범위

컨테이너 내에서 중앙에 배치하려는 다양한 종횡비의 이미지가 있는 경우 Flexbox와 object-fit의 조합을 사용할 수 있습니다.

HTML: 

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">

CSS: 

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; }

11. 수직 정렬과 줄 높이 결합:

수직 정렬 속성을 line-height 속성과 결합하여 특히 더 큰 글꼴 크기의 경우 더욱 정확한 수직 정렬을 달성할 수 있습니다.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; }

12. 정렬을 위한 디스플레이 속성 사용:

수직 정렬은 주로 인라인 수준 요소에서 작동하지만 특정 컨텍스트 내에서 블록 수준 요소에 대한 수직 정렬을 달성하도록 표시 속성을 변경할 수 있습니다.

 .container { display: table-cell; vertical-align: middle; }

13. 테이블의 수직 정렬:

수직 정렬 속성은 테이블 셀() 셀 내 콘텐츠 정렬을 제어합니다.

 td { vertical-align: middle; }

14. 인라인 블록 요소 정렬:

수직 정렬을 사용하여 텍스트 줄 내에서 인라인 블록 요소(예: 텍스트 옆의 아이콘)를 정렬할 수 있습니다.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; }

이는 다양한 시나리오에서 수직 정렬을 처리하는 몇 가지 예일 뿐입니다. 특정 레이아웃 및 요구 사항에 따라 원하는 결과를 얻기 위해 이러한 기술을 조정하거나 결합해야 할 수도 있습니다. CSS는 다양한 상황에서 수직 정렬을 효과적으로 처리할 수 있는 다양한 도구를 제공합니다.

수직 정렬 속성에는 용도가 있지만 모든 정렬 시나리오, 특히 블록 수준 요소에 대한 보다 포괄적인 솔루션이 존재한다는 점을 기억하십시오. 보다 복잡한 레이아웃 및 정렬 요구 사항의 경우 원하는 결과를 보다 효과적이고 예측 가능하게 얻으려면 Flexbox, CSS Grid 또는 CSS 위치 값(예: 절대 및 상대)과 같은 최신 CSS 레이아웃 기술을 탐색하는 것이 좋습니다.

'수직 정렬'은 인라인 수준 요소나 테이블 셀에만 영향을 미친다는 점을 기억하세요. Flexbox, 그리드 레이아웃 또는 위치 지정과 같은 기술을 사용하여 블록 수준 요소를 수직으로 정렬합니다.

몇 가지 추가 예

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>
지금 테스트해보세요

산출

CSS로 텍스트를 수직으로 정렬하는 방법

이제 텍스트를 이미지와 정렬하는 또 다른 예가 있습니다.

예

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment.
지금 테스트해보세요

산출

CSS로 텍스트를 수직으로 정렬하는 방법

CSS에서 수직 정렬의 장점

    인라인 요소에 사용하기 쉬움:수직 정렬 속성은 텍스트 줄이나 기타 요소 내에서 이미지, 아이콘, 텍스트와 같은 요소를 정렬하는 데 간단합니다.광범위한 브라우저 지원:수직 정렬 속성은 브라우저를 잘 지원하며 다양한 브라우저에서 널리 지원됩니다.다중 정렬 옵션:기준선, 중간, 상단, 하단, 텍스트 상단, 텍스트 하단, 아래 첨자, 위 첨자와 같은 다양한 정렬 옵션을 제공하여 개발자가 요구 사항에 따라 요소를 정렬할 수 있는 유연성을 제공합니다.반응형 정렬:컨테이너의 크기나 사용 가능한 공간에 따라 수직 정렬을 조정하기 위해 반응형 디자인에 사용할 수 있습니다.인라인 요소의 단순성:텍스트 줄 내에서 아이콘이나 이미지와 같은 작은 요소를 정렬하기 위해 수직 정렬 속성은 복잡한 레이아웃 기술 없이도 비교적 간단한 솔루션을 제공합니다.미세 조정:이 속성을 사용하면 요소의 수직 위치를 미세 조정할 수 있으며 이는 특정 설계 목표를 달성하는 데 유용할 수 있습니다.표 셀과의 일관성:테이블과 관련하여 수직 정렬 속성은 테이블 셀 내의 내용 정렬을 제어합니다. 이는 테이블 기반 레이아웃 전체에서 일관성을 유지하는 데 도움이 될 수 있습니다.텍스트와 결합:아이콘이나 인라인 레이블을 인접한 텍스트와 정렬하는 등 요소를 텍스트 콘텐츠와 효과적으로 정렬합니다.종횡비 유지:텍스트 줄 내에서 이미지나 아이콘을 정렬할 때 수직 정렬은 특히 적절한 글꼴 크기 및 줄 높이와 결합될 때 이러한 요소의 가로 세로 비율을 유지하는 데 도움이 될 수 있습니다.빠른 정렬 수정:특히 콘텐츠가 혼합된 시나리오에서 수직 정렬 문제에 대한 빠른 수정이 필요한 경우 수직 정렬은 광범위한 레이아웃 재구성 없이도 빠른 솔루션을 제공할 수 있습니다.CSS 이메일 스타일링:복잡한 레이아웃을 더 잘 지원해야 하는 HTML 이메일에서 수직 정렬을 사용하면 외부 스타일시트나 복잡한 기술에 의존하지 않고 요소의 기본 수직 정렬에 도움이 될 수 있습니다.디스플레이와 호환 가능:inline-block: 수직 정렬 속성은 인라인 블록 요소와 호환되므로 한 줄 내에서 이러한 요소를 쉽게 수직으로 정렬할 수 있습니다.일관성 유지:표 형식 데이터의 일부이거나 여러 행이나 열에서 유사한 요소와 정렬해야 하는 요소의 경우 수직 정렬은 시각적 일관성을 유지하는 데 도움이 될 수 있습니다.브라우저 호환성:일부 최신 CSS 기술과 달리 수직 정렬은 오랫동안 CSS의 일부였으며 브라우저 간 호환성이 뛰어납니다.

CSS에서 수직 정렬의 단점

    인라인 요소로 제한됩니다.수직 정렬 속성의 가장 중요한 제한은 인라인 수준 요소나 테이블 셀에서만 작동한다는 것입니다. 블록 수준 요소에는 직접 적용되지 않습니다. 이로 인해 더 큰 요소나 복잡한 레이아웃의 경우 수직 정렬이 더 어려워질 수 있습니다.일관성 없는 행동:세로 정렬은 까다롭고 일관성이 없을 수 있으며, 특히 글꼴 크기, 줄 높이 및 중첩된 요소가 다를 수 있습니다. 동일한 수직 정렬 값이라도 상황에 따라 다른 결과를 생성할 수 있습니다.브라우저 단점:일부 오래된 브라우저에서는 수직 정렬 속성에 대해 일관되지 않은 해석이나 문제가 있을 수 있으며, 이로 인해 예상치 못한 결과가 발생할 수 있습니다. 그러나 이 문제는 최신 브라우저의 발전으로 개선되었습니다.간격에 대한 제한된 제어:수직 정렬 속성은 주로 요소를 수직으로 정렬하는 작업을 처리하지만 요소 사이의 간격에 대한 약간의 제어만 제공합니다. 간격을 조정하려면 추가 CSS 또는 HTML 수정이 필요한 경우가 많습니다.대안으로 Flexbox와 Grid:보다 복잡한 레이아웃 요구 사항과 블록 수준 요소의 수직 정렬을 위해 개발자는 보다 강력하고 예측 가능한 솔루션을 제공하는 Flexbox 또는 CSS Grid를 사용하는 경우가 많습니다.전체 센터링에 적합하지 않음:수직 정렬은 인라인 요소를 수직으로 정렬하는 데 유용하지만 추가 CSS 기술을 사용하여 전체 중심(수평 및 수직) 블록 수준 요소에 적합합니다.오해의 소지가 있는 이름:'수직 정렬'이라는 이름은 개발자가 흔히 기대하는 방식으로 요소를 수직으로 정렬하지 않기 때문에 오해의 소지가 있습니다. 대신 라인 상자 내에서 요소 내용의 정렬을 제어합니다.다양한 글꼴의 복잡성:다양한 글꼴 크기와 줄 높이의 요소를 처리할 때 수직 정렬 동작을 예측할 수 없습니다. 이는 일관된 수직 정렬을 어렵게 만들 수 있습니다.복잡한 레이아웃의 경우 제한됨:상위 컨테이너 내에서 더 큰 블록 수준 요소를 수직으로 정렬해야 하는 복잡한 레이아웃이나 시나리오에는 적합하지 않습니다.브라우저 간 호환성:최신 브라우저에서는 수직 정렬에 대한 지원이 향상되었지만 이전 브라우저에서는 여전히 불일치나 예상치 못한 동작이 나타날 수 있습니다.대체 기술:Flexbox 및 CSS Grid와 같은 최신 CSS 레이아웃 기술은 인라인 및 블록 수준 요소의 수직 정렬을 포함하여 복잡한 레이아웃 요구 사항을 처리하는 보다 강력하고 예측 가능한 방법을 제공합니다.접근성 고려사항:레이아웃에 수직 정렬을 사용하는 것은 화면 판독기 및 기타 보조 기술을 방해할 수 있으므로 가장 접근하기 쉬운 접근 방식이 아닐 수 있습니다. 시맨틱 HTML과 적절한 CSS 기술이 접근성을 위한 더 나은 선택인 경우가 많습니다.디버깅 과제:세로 정렬과 관련된 예기치 않은 동작이나 정렬 문제를 디버깅하는 것은 때로 까다로울 수 있습니다. 특히 중첩된 요소와 다양한 글꼴 크기를 처리할 때 더욱 그렇습니다.웹 레이아웃의 진화:웹 개발 환경이 발전함에 따라 CSS 그리드 레이아웃 및 Flexbox와 같은 새로운 레이아웃 기술은 레이아웃 문제에 대한 보다 현대적이고 포괄적인 솔루션을 제공하므로 잠재적으로 많은 시나리오에서 수직 정렬의 관련성이 낮아집니다.

전반적으로 수직 정렬 속성은 텍스트 줄 내에서 인라인 요소나 표 셀을 정렬하는 데 유용하지만 개발자는 특히 블록 수준 요소나 복잡한 레이아웃을 처리할 때 고급 레이아웃 및 위치 지정 요구 사항을 위해 다른 CSS 기술이 필요한 경우가 많습니다. CSS Flexbox와 CSS Grid는 더 광범위한 정렬 및 위치 지정 제어를 위한 강력한 대안입니다.

마두리가 말했다.

결론

수직 정렬 속성은 텍스트 또는 표 셀 내의 인라인 요소를 정렬하는 데 유용합니다. 그러나 복잡한 레이아웃이나 블록 수준 요소에는 제한이 있으며 효과적으로 사용하기 어려울 수 있습니다. 개발자는 정렬 및 위치 지정에 대한 더 많은 제어력과 유연성을 제공하는 최신 CSS 레이아웃 기술을 고려해야 합니다.