테치블 수직 정렬

테치블 수직 정렬

이 vertical-align속성은 <th> 또는 <td>에 내용의 세로 정렬 (위, 아래 또는 가운데)을 설정합니다.

 

기본적으로 표의 내용은 중간에 있습니다 (<th> 및 <td> 요소 모두에 해당).

 

다음 예제에서는 <td> 요소의 세로 텍스트 정렬을 아래쪽으로 설정합니다.

 

 

td {

    height: 50px;

    vertical-align: bottom;

}

 

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

    border: 1px solid black;

}

 

table {

    border-collapse: collapse;

    width: 100%;

}

 

td {

    height: 50px;

    vertical-align: bottom;

}

</style>

</head>

<body>

 

<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>Peter</td>

    <td>Griffin</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>Lois</td>

    <td>Griffin</td>

    <td>$150</td>

  </tr>

  <tr>

    <td>Joe</td>

    <td>Swanson</td>

    <td>$300</td>

  </tr>

  <tr>

    <td>Cleveland</td>

    <td>Brown</td>

    <td>$250</td>

</tr>

</table>

 

</body>

</html>

789de082eda191a16b29225dae1ca3ac_1488983212_0025.png

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 8년 전 조회 2,337
CSS 8년 전 조회 2,196
CSS 8년 전 조회 2,377
CSS 8년 전 조회 2,462
CSS 8년 전 조회 3,025
CSS 8년 전 조회 2,678
CSS 8년 전 조회 2,544
CSS 8년 전 조회 1,989
CSS 8년 전 조회 2,029
CSS 8년 전 조회 2,273
CSS 8년 전 조회 1,694
CSS 8년 전 조회 2,355
CSS 8년 전 조회 1,902
CSS 8년 전 조회 2,338
CSS 8년 전 조회 2,362
CSS 8년 전 조회 2,379
CSS 8년 전 조회 2,186
CSS 8년 전 조회 1,926
CSS 8년 전 조회 2,390
CSS 8년 전 조회 1,741
CSS 8년 전 조회 1,826
CSS 8년 전 조회 1,916
CSS 8년 전 조회 2,554
CSS 8년 전 조회 2,622
CSS 8년 전 조회 1,988
CSS 8년 전 조회 2,472
CSS 8년 전 조회 1,991
CSS 8년 전 조회 2,056
CSS 8년 전 조회 1,944
CSS 8년 전 조회 1,681