vertical-align

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

vertical-align 은 인라인 요소들의 수직정렬 방법을 지정합니다.
인라인은 img, span 같이 한줄에 위치하는 html 요소들 입니다.

예제 1
vertical-align 개요 - 이미지와 텍스트의 위치 예제
보기
vertical-align : baseline (기본값)
vertical-align : middle
vertical-align : text-bottom
vertical-align : text-top
vertical-align : top
아래 예제가 vertical-align : top 처럼 보인다면 브라우저가 지원하지 않는것 입니다.
vertical-align : bottom
vertical-align : super
아래 예제가 vertical-align : top 처럼 보인다면 브라우저가 지원하지 않는것 입니다.
vertical-align : sub
설명

- 이미지에 vertical-align 을 적용하고 뒤에 나오는 텍스트의 위치 변화를 보는 예제입니다.
- IE8 이상의 경우 정상 작동합니다.
- 크롬이나 파이어폭스는 최신버젼을 쓴다면 OK!

예제 2
실습 - 사이즈가 다른 이미지에 적용해보기
보기
vertical-align :
vertical-align : baseline
설명

- 높이가 각각 다른 이미지에 적용해 보는 예제입니다.
- 높이가 제일큰 이미지에 맞춰서 정렬됩니다.

예제 3
실습 - 속성값 조절해 보기
보기
CSS 공작소 CSS 공작소
vertical-align :
vertical-align : baseline
설명
- 이미지에 적용해본 예제입니다. 뒤에 텍스트가 어떻게 위치하는지 해보세요 ^^
- 곧 더 많은 예제를 추가해 보겠습니다.
예제 4
실습 - px 수치 단위로 값 조절해 보기
보기
vertical-align :
0
vertical-align : 0
CSS 공작소
설명
- 수치단위의 값도 사용할 수 있습니다.
- 이미지의 높이는 200px 입니다.
- 값을 -200px 로 설정하면 텍스트가 이미지 바로 위로 가는것을 볼 수 있습니다.
예제 5
실습 - % 수치 단위로 값 조절해 보기
보기
vertical-align :
0
vertical-align : 0
CSS 공작소
설명
- % 단위 값도 사용할 수 있습니다.
- 글자의 높이기준으로 위치합니다.
- 100% 이면 한줄아래 200%면 두줄아래 -100% 이면 한줄위 이렇게요.
예제 6
table 의 cell (td) 에 적용해 보기
보기

vertical-align : top

vertical-align : middle

vertical-align : bottom

기본값 (vertical-align : middle)
소스
<style type="text/css">
    .css_test {
        border-spacing : 0;
        border : 5px solid silver;
        margin-top : 15px;
        border-collapse : collapse;
    }
    .css_test td {
        border : 1px solid black;
        height : 220px;
        text-align : center;
        width : 300px;
    }
    .css_test img {
        height : 140px;
    }
</style>

<table class="css_test" align="center">
    <tr>
        <td style="vertical-align:top;">
            <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /><br>
            vertical-align : top
        </td>
    </tr>
    <tr>
        <td style="vertical-align:middle;">
            <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /><br>
            vertical-align : middle
        </td>
    </tr>
    <tr>
        <td style="vertical-align:bottom;">
            <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /><br>
            vertical-align : bottom
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" /><br>
            기본값 (vertical-align : middle)
        </td>
    </tr>
</table>
사용된 CSS (클릭시 보기) : borderborder-collapseborder-spacingheightmargin-toptext-alignvertical-alignwidth
설명
- table 의 td 요소에 적용한 예제입니다.
- top, middle, bottom 을 사용할 수 있습니다.
 
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소