블록 요소 수직 정렬하기: vertical-align 속성 사용

2024-06-22

Bootstrap 3에서 수직 정렬하기

인라인 요소 수직 정렬

인라인 요소(예: <span>, <a>, <img>)를 수직으로 정렬하려면 다음 클래스를 사용할 수 있습니다.

  • .align-baseline: 상위 요소의 기준선에 요소를 정렬합니다.

예를 들어 다음 코드는 <span> 요소를 상위 요소의 가운데 높이에 정렬합니다.

<span class="align-middle">텍스트</span>

방법 1: Flexbox 사용

Flexbox는 요소를 유연하게 배열하는 레이아웃 모듈입니다. Flexbox를 사용하여 블록 요소를 수직으로 가운데 정렬하려면 다음 코드를 사용할 수 있습니다.

<div class="d-flex justify-content-center align-items-center">
  <p>텍스트</p>
</div>

위 코드는 다음과 같이 작동합니다.

  • .d-flex: 요소를 Flexbox 컨테이너로 변환합니다.
  • .justify-content-center: 컨테이너의 가운데에 요소를 정렬합니다.

방법 2: vertical-align 속성 사용

vertical-align 속성을 사용하여 블록 요소를 수직으로 정렬할 수도 있습니다. 하지만 이 방법은 Flexbox만큼 유연하지 않고 일부 브라우저에서 호환되지 않을 수 있습니다.

<div style="vertical-align: middle;">
  <p>텍스트</p>
</div>

방법 3: position 및 top 속성 사용

positiontop 속성을 사용하여 블록 요소를 수직으로 정렬할 수도 있습니다. 하지만 이 방법은 이전 방법들만큼 사용하기 쉽지 않고 복잡할 수 있습니다.

<div style="position: relative; top: 50%; transform: translateY(-50%);">
  <p>텍스트</p>
</div>

행 내 열 수직 정렬

Bootstrap 행 내 열을 수직으로 정렬하려면 다음 클래스를 사용할 수 있습니다.

  • .align-self-start: 열을 행의 맨 위에 정렬합니다.
<div class="row">
  <div class="col-md-4 align-self-center">열 1</div>
  <div class="col-md-4 align-self-center">열 2</div>
  <div class="col-md-4 align-self-center">열 3</div>
</div>

참고:

  • Flexbox 및 vertical-align 속성에 대한 자세한



Bootstrap 3에서 수직 정렬을 위한 예제 코드

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <span class="align-middle">가운데 정렬된 텍스트</span>
    </div>
  </div>
</div>

블록 요소 수직 정렬 (Flexbox 사용)

이 예제에서는 <p> 요소를 Flexbox를 사용하여 컨테이너의 가운데에 정렬합니다.

<div class="container">
  <div class="row">
    <div class="col-md-12 d-flex justify-content-center align-items-center">
      <p>가운데 정렬된 텍스트</p>
    </div>
  </div>
</div>

이 예제에서는 vertical-align 속성을 사용하여 <p> 요소를 컨테이너의 가운데 높이에 정렬합니다.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p style="vertical-align: middle;">가운데 정렬된 텍스트</p>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-4 align-self-center">열 1</div>
    <div class="col-md-4 align-self-center">열 2</div>
    <div class="col-md-4 align-self-center">열 3</div>
  </div>
</div>
  • 이 예제들은 기본적인 수직 정렬만을 보여줍니다. 더 복잡한 레이아웃의 경우 Flexbox의 기능을 더 활용해야 할 수도 있습니다.

이 예제들이 도움이 되었기를 바랍니다! 궁금한 점이 있으면 알려주세요.




Bootstrap 3에서 수직 정렬을 위한 대체 방법

테이블을 사용하여 요소를 수직으로 정렬하는 간단한 방법이 있습니다. 하지만 이 방법은 접근성이 좋지 않고 복잡한 레이아웃에 적합하지 않을 수 있습니다.

<table>
  <tr>
    <td style="vertical-align: middle;">가운데 정렬된 텍스트</td>
  </tr>
</table>

Absolute 정위 사용

<div style="position: relative; height: 100px;">
  <p style="position: absolute; top: 50%; transform: translateY(-50%);">가운데 정렬된 텍스트</p>
</div>

마진 사용

일부 경우 마진을 사용하여 요소를 수직으로 정렬할 수 있습니다. 하지만 이 방법은 정확한 정렬을 위해 더 많은 CSS 코드가 필요할 수 있으며 복잡한 레이아웃에 적합하지 않을 수 있습니다.

<div style="margin-top: 50px;">
  <p>가운데 정렬된 텍스트</p>
</div>

주의 사항:

  • 위에 제시된 대체 방법은 모든 상황에 적합하지 않을 수 있습니다. 사용하기 전에 장단점을 신중하게 고려해야 합니다.

html css twitter-bootstrap


HTML 텍스트 선택 막기: 초보자도 쉽게 따라 할 수 있는 완벽 가이드

CSS 스타일 속성 사용:user-select 속성을 사용하여 텍스트 선택을 비활성화할 수 있습니다.장점:가장 간단하고 가벼운 방법입니다.모든 브라우저에서 호환됩니다.단점:user-select 속성은 마우스 드래그를 통한 선택만 차단합니다...


CSS를 사용하여 모든 브라우저에서 div 요소를 세로로 가운데 정렬하는 방법

margin: 0 auto; 사용:가장 간단하고 널리 사용되는 방법입니다. div 요소에 margin 속성을 설정하고 left 및 right 값을 auto로 설정하면 좌우 여백이 자동으로 설정되어 div 요소가 가운데 정렬됩니다...


Angular에서 부모 컴포넌트의 CSS 파일에서 자식 컴포넌트 스타일 지정하기

가장 간단한 방법은 자식 컴포넌트의 선택자를 사용하여 스타일을 지정하는 것입니다. 예를 들어, 다음과 같이 작성할 수 있습니다.이 코드는 . parent-component 컴포넌트 내부에 있는 모든 . child-component 컴포넌트의 텍스트 색상을 빨간색으로 설정합니다...


html css twitter bootstrap