Tidadigi Logo

CSS text-align Property

Thuộc tính text-align trong CSS kiểm soát căn chỉnh ngang cho nội dung inline. Nội dung này như văn bản và các phần tử inline-block bên trong phần tử block-level.

Cú pháp:

text-align: left|right|center|justify|initial|inherit;

Giá trị mặc định: left nếu hướng là ltr, và right nếu hướng là rtl.

Giá trị thuộc tính:

  • left: Được sử dụng để thiết lập căn chỉnh văn bản sang trái. Đây là thuộc tính mặc định.
  • right: Nó được dùng để thiết lập căn chỉnh văn bản sang phải.
  • center: Nó được dùng để thiết lập căn chỉnh văn bản vào giữa.
  • justify: Nó được dùng để trải đều các từ trên toàn dòng. Tức là bằng cách kéo giãn nội dung của một phần tử.
  • initial: Nó được dùng để đặt thuộc tính CSS của phần tử về giá trị mặc định.
  • inherit: Được sử dụng để kế thừa một thuộc tính cho một phần tử. Thuộc tính này lấy giá trị từ thuộc tính phần tử cha.

Vui lòng tham khảo bài viết CSS Align để biết thêm chi tiết.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính text-align để căn chỉnh nó theo các giá trị được chỉ định.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>text-align property</title>
    <style>
    h1 {
        color: green;
    }
    
    .main {
        border: 1px solid black;
    }
    
    .gfg1 {
        text-align: left;
    }
    
    .gfg2 {
        text-align: right;
        ;
    }
    
    .gfg3 {
        text-align: center;
    }
    
    .gfg4 {
        text-align: justify;
    }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>text-align property</h2>
    <div class="main">
        <h3>text-align: left;</h3>
        <div class="gfg1"> 
        The course is designed for students 
        as well as working professionals to 
        prepare for coding interviews. This 
        course is going to have coding questions 
        from school level to the level needed 
        for product based companies like Amazon, 
        Microsoft, Adobe, etc. 
        </div>
    </div>
    <br>
    <div class="main">
        <h3 style="text-align: right;">text-align: right;</h3>
        <div class="gfg2"> 
        The course is designed for students 
        as well as working professionals to 
        prepare for coding interviews. This 
        course is going to have coding questions 
        from school level to the level needed 
        for product based companies like Amazon, 
        Microsoft, Adobe, etc. 
        </div>
    </div>
    <br>
    <div class="main">
        <h3 style="text-align: center;">text-align: center;</h3>
        <div class="gfg3"> 
        The course is designed for students 
        as well as working professionals to 
        prepare for coding interviews. This 
        course is going to have coding questions 
        from school level to the level needed for 
        product based companies like Amazon, 
        Microsoft, Adobe, etc. 
        </div>
    </div>
    <br>
    <div class="main">
        <h3 style="text-align: justify;">text-align: justify;</h3>
        <div class="gfg4"> 
        The course is designed for students 
        as well as working professionals to 
        prepare for coding interviews. This 
        course is going to have coding questions 
        from school level to the level needed 
        for product based companies like Amazon, 
        Microsoft, Adobe, etc. 
        </div>
    </div>
</body>
</html>

Đầu ra: 

css-text-align-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính text-align được liệt kê dưới đây: 

  • Google Chrome 1.0
  • Internet Explorer 3.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

Last Updated : 21/07/2025