Liên hệ
css

Căn lề text-align và vertical-align trong CSS

Sử dụng thuộc tính text-align CSS để căn lề trái, căn lề phải và thuộc tính vertical-align để căn lề trên, dưới

Căn lề với text-align

Thuộc tính text-align để căn chỉnh vị trí của chữ theo chiều ngang. Mặc định là căn lề trái. Tuy nhiên bạn có thể chỉ ra các giá trị:

  • left căn lề trái
  • right căn lề phải
  • center căn giữa
  • justify dãn đều chữ
<style>
    p.left {
       text-align: left;
    }
    p.right {
       text-align: right;
    }
    p.center {
       text-align: center;
    }
</style>

<p class="left">This paragraph is aligned to <strong>left.</strong></p>
<p class="right">This paragraph is aligned to <strong>right.</strong></p>
<p class="center">This paragraph is aligned to <strong>center.</strong></p>

This paragraph is aligned to left.

This paragraph is aligned to right.

This paragraph is aligned to center.

Căn trên dưới vertical-align

Thuộc tính vertical-align dùng để căn lề trên dưới (theo chiều đứng). Các giá trị nhận phổ biến là top middle bottom

  • top căn mép trên
  • middle căn giữa
  • bottom căn mép dưới
  • baseline căn theo đường cơ sở
  • sub chữ thụt xuống
  • sup chữ nhô lên
  • 10px, 10pt, 10cm lệch lên một giá trị (âm thì xuống)
<style>
    td.top {
       vertical-align: top;
    }
    td.middle {
       vertical-align: middle;
    }
    td.bottom {
       vertical-align: bottom;
    }
</style>

<table border="1" cellpadding="2" cellspacing="0" style="height: 150px;">
  <tr>
     <td class="top">Top</td>
     <td class="middle">Middle</td>
     <td class="bottom">Bottom</td>
  </tr>
</table>

Top Middle Bottom
<style>
    span.baseline {
        vertical-align: baseline;
        color: red;
    }
    span.sub {
        vertical-align: sub;
                color: red;

    }
    span.super {
        vertical-align: super;
                color: red;

    }
    span.pixel {
        vertical-align: -10px;
                color: red;

    }
</style>

<p>This is an <span class="baseline">inline text</span> example.</p>
<p>This is a <span class="sub">sub line text</span> example.</p>
<p> This is a <span class="super">super line text</span> example.</p>
<p> This is a <span class="pixel">pixel</span> example.</p>

This is an inline text example.

This is a sub line text example.

This is a super line text example.

This is a pixel example.

Thuộc tính vertical-align không làm việc chính xác cho tất cả các phần tử HTML. Ví dụ như trong thẻ div có thể cần thêm các thuộc tính để nó làm việc chính xác: ví dụ: display: inline-table;display: table-cell;

Vui lòng đăng ký ủng hộ kênh