Căn chỉnh văn bản CSS - Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải - KIEMLUA24H
   

Căn chỉnh văn bản CSS – Ví dụ về kiểu văn bản căn giữa, căn đều, căn phải

CSS Text Align – Centered, Justified, Right Aligned Text Style Example

 

Chúng tôi sử dụng CSS text-align thuộc tính để căn chỉnh nội dung bên trong phần tử cấp khối.

Ví dụ về các phần tử cấp khối là các đoạn văn (<p>...</p>), divs (<div>...</div>), phần (<section>...</section>), bài viết (<article>...</article>), và như thế.

Căn chỉnh này chỉ ảnh hưởng đến trục ngang. Nên text-align tài sản khác với vertical-align thuộc tính mà chúng tôi sử dụng để đặt căn chỉnh theo chiều dọc của một phần tử.

Mục lục

Cú pháp cơ bản

Đây là cú pháp cơ bản cho text-align bất động sản:

block-level-element {
      text-align: value;
    }

Bây giờ chúng ta sẽ xem xét các giá trị khác nhau mà nó có thể sử dụng để giúp bạn định vị mọi thứ trên trang.

Giá trị của text-align Bất động sản

Các text-align tài sản chấp nhận left, center, right, justify, và inherit như các giá trị.

Chúng ta sẽ xem xét từng giá trị một.

Trước khi tôi đi sâu vào các giá trị và chúng trông như thế nào trong trình duyệt, hãy xem qua CSS bên dưới. Tôi đặt các kiểu này để cải thiện khả năng hiển thị, vì vậy bạn có thể thấy mọi thứ tốt hơn:

   body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    div {
      background-color: #adadad;
      width: 40rem;
      height: 4rem;
      padding: 3rem 0.5rem;
    }

Các left Giá trị

Các left giá trị của text-align thuộc tính là mặc định. Vì vậy, mọi nội dung bên trong phần tử cấp khối đều được căn chỉnh về bên trái theo mặc định.

 div {
      text-align: left;
    }

ss-1-3

Nếu bạn muốn nội dung bên trong một phần tử cấp khối căn chỉnh sang bên trái, bạn không cần chỉ định nó text-align giá trị của left. Nếu bạn làm vậy, bạn chỉ đang sao chép những gì đã mặc định.

Các center Giá trị

Với giá trị trung tâm, các khoảng trắng được tạo ở bên trái và bên phải, do đó, mọi thứ được đẩy vào trung tâm.

Nếu bạn muốn căn chỉnh nội dung bên trong phần tử cấp khối cho chính giữa, center giá trị là đặt cược tốt nhất của bạn.

  div {
      text-align: center;
    }

ss-2-3

Các right Giá trị

Gán giá trị của right đến text-align thuộc tính đẩy nội dung bên trong phần tử cấp khối sang bên phải.

  div {
      text-align: right;
    }

ss-3-4

Các justify Giá trị

Các justify giá trị của text-align Thuộc tính xếp dòng nội dung ở các cạnh bên trái và bên phải của phần tử cấp khối (hộp). Nếu dòng cuối cùng không phải là dòng đầy đủ, thì nó để nó một mình. Thật dễ dàng hơn để xem cách này hoạt động trong hình ảnh bên dưới:

 div {
      text-align: justify;
    }

ss-4-4

Các inherit Giá trị

Các inherit giá trị của text-align tài sản hoạt động như tên của nó. Một phần tử có giá trị căn chỉnh văn bản của nó được đặt thành inherit kế thừa text-align giá trị của cha mẹ trực tiếp của nó.

 div {
      text-align: inherit;
    }

ss-5-5

Trong trường hợp này, div kế thừa giá trị căn chỉnh văn bản của phần nội dung – đó là left theo mặc định.

Nếu text-align giá trị của body được đặt thành right, và của div được để lại để kế thừa, văn bản bên trong div căn chỉnh bên phải.

 body {
      text-align: right;
    }

    div {
      text-align: inherit;
    }

ss-6-1

Sự kết luận

Trong bài viết này, bạn đã tìm hiểu về CSS text-align tài sản và các giá trị của nó.

Các ví dụ mà chúng tôi đã xem xét ở đây để xem các giá trị hoạt động như thế nào chỉ chứa văn bản – vì vậy bạn có thể tự hỏi liệu các giá trị có hoạt động trên hình ảnh hay không. Vâng, có họ làm.

Dưới đây là hình ảnh bên trong một div với text-align được đặt ở giữa:

 <div>
      <img
        src="https://www.freecodecamp.org/news/css-text-align-centered-justified-right-aligned-text-style-example/coming-soon.jpg"
        alt="coming_soon"
        width="74px"
        height="54px"
      />
</div>
 div {
      text-align: center;
    }

 

Chia sẻ ngay
  
 
 
   

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Vui lòng bật JavaScript!
Nếu không bật trang không thể hoạt động bình thường![ ? ]