Hướng dẫn text-align css

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính text-align

Định nghĩa và sử dụng

Thuộc tính text-align sắp xếp các nội dung theo chiều ngang.

Cấu trúc

tag {
    text-align: giá trị;
}

Với giá trị như sau:

HTML viết:

Canh trái
Canh giữa
Canh phải

Hiển thị trình duyệt khi chưa có CSS:

Canh trái

Canh giữa

Canh phải

CSS viết:

p.alignLeft {
    text-align: left;
}

p.alignCenter {
    text-align: center;
}

p.alignRight {
    text-align: right;
}

Hiển thị trình duyệt khi có CSS:

Canh trái

Canh giữa

Canh phải

Trình duyệt hỗ trợ

Thuộc tính text-align được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

1- CSS text-align

Thuộc tính (property) CSS text-align được sử dụng cho một phần tử khối (block element) hoặc một ô (cell) của bảng để căn chỉnh theo phương ngang (Horizontal align) nội dung của nó.

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

Giá trị mặc định của CSS text-align phụ thuộc vào hướng của phần tử. Nếu hướng của phần tử là "Left-to-Right" thì giá trị mặc định của CSS text-align là left, ngược lại nếu hướng của phần tử là "Right-to-Left" giá trị mặc định của CSS text-align là right.

text-align-example.html

   
      
      
      
      
   
   
       
CSS text-align
        Left

        Right

        Center

        Justify

       

       

           Apollo 11 was the spaceflight that landed the first humans,
           Americans Neil Armstrong and Buzz Aldrin,
           on the Moon on July 20, 1969, at 20:18 UTC.
           Armstrong became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.

           Armstrong spent about three and a half two
           and a half hours outside the spacecraft,
           Aldrin slightly less; and together they
           collected 47.5 pounds (21.5 kg) of lunar material
           for return to Earth. A third member of the mission,...
       
   

Khi CSS text-align được áp dụng cho một phần tử, nó có tác dụng với tất cả các nội dụng nội tuyến (inline content) của phần tử này, chẳng hạn nội dung văn bản, các phần tử con như ,.. Nhưng nó không có tác dụng đối với các phần tử khối con của phần tử hiện tại.

Hãy xem ví dụ sau:

• Phần tử DIV1 được thiết lập CSS text-align:center.
• Phần tử DIV2 là con của DIV1, nhưng DIV2 không chịu ảnh hưởng của CSS text-align:center.

text-align-example2.html

   
      
      
      
      
   
   
       
CSS text-align
        Left

        Right

        Center

        Justify

       

       

         CSS text-align cannot align child block elements.
       
       

             Apollo 11 was the spaceflight that landed the first humans,
             Americans Neil Armstrong and Buzz Aldrin,
             on the Moon on July 20, 1969, at 20:18 UTC.
             Armstrong became the first to step onto the lunar
             surface 6 hours later on July 21 at 02:56 UTC.

             Armstrong spent about three and a half two
             and a half hours outside the spacecraft,
             Aldrin slightly less; and together they
             collected 47.5 pounds (21.5 kg) of lunar material
             for return to Earth. A third member of the mission,...

            

                I am div2, A block element.
            
       
   

Ví dụ sử dụng CSS margin:auto.

margin-auto-example.html

   
      
      
      
   
   
       
CSS margin:auto
       

       

            I am div1 {text-align: center;}
            

                margin-left:auto;

                margin-right:auto;
            
            

                margin-right:auto;
            
            

                margin-left:auto;