컴

테치블 수직 정렬

· 2017-03-08 (수) 23:26:54 · 2582

테치블 수직 정렬

이 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

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

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 17-03-13 조회 2,873
CSS 17-03-13 조회 2,751
CSS 17-03-11 조회 2,218
CSS 17-03-11 조회 2,247
CSS 17-03-11 조회 2,484
CSS 17-03-09 조회 1,909
CSS 17-03-09 조회 2,551
CSS 17-03-09 조회 2,094
CSS 17-03-08 조회 2,526
CSS 17-03-08 조회 2,583
CSS 17-03-08 조회 2,572
CSS 17-02-28 조회 2,384
CSS 17-02-28 조회 2,118
CSS 17-02-28 조회 2,594
CSS 17-02-27 조회 1,924
CSS 17-02-27 조회 2,026
CSS 17-02-27 조회 2,134
CSS 17-02-26 조회 2,749
CSS 17-02-26 조회 2,820
CSS 17-02-26 조회 2,195
CSS 17-02-25 조회 2,656
CSS 17-02-25 조회 2,223
CSS 17-02-25 조회 2,262
CSS 17-02-24 조회 2,168
CSS 17-02-24 조회 1,883
CSS 17-02-24 조회 1,933
CSS 17-02-21 조회 3,454
CSS 17-02-21 조회 2,453
CSS 17-02-21 조회 2,054
CSS 17-02-20 조회 2,483