Hướng dẫn text-align html

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

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
Thuộc tính text-align
1- CSS 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:

Thuộc tính	giá trị	Ví dụ	Mô tả
text-align	left	text-align: left;	Sắp nội dung theo chiều ngang nằm về bên trái, đây là dạng mặc định.
right	text-align: right;	Sắp nội dung theo chiều ngang nằm về bên phải.
center	text-align: center;	Sắp nội dung theo chiều ngang nằm giữa.
justify	text-align: justify;	Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau.
inherit	text-align: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

<html>
<head></head>
<body>
<p class="alignLeft">Canh trái</p>
<p class="alignCenter">Canh giữa</p>
<p class="alignRight">Canh phải</p>
</body>
</html>

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

Trang chủ
Tham khảo
CSS
Ví dụ về thuộc tính text-align

Thuộc tính text-align

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

text-align: left;

Sắp nội dung theo chiều ngang nằm về bên trái, đây là dạng mặc định.

<html>
<head>
<style type="text/css">
p {
    text-align: left;
}
</style>
</head>

<body>
<p>text align left</p>
</body>
</html>

text-align: right;

Sắp nội dung theo chiều ngang nằm về bên phải.

<html>
<head>
<style type="text/css">
p {
    text-align: right;
}
</style>
</head>

<body>
<p>text align right</p>
</body>
</html>

text-align: center;

Sắp nội dung theo chiều ngang nằm giữa.

<html>
<head>
<style type="text/css">
p {
    text-align: center;
}
</style>
</head>

<body>
<p>text align center</p>
</body>
</html>

text-align: justify;

Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau.

<html>
<head>
<style type="text/css">
p {
    text-align: justify;
    width: 200px;
}
</style>
</head>

<body>
<p>text align justify : Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau, điều
 này có nghĩa là trình duyệt sẽ tự động canh đều các dòng nội dung sao cho tất cả các 
 dòng nội dung đều có cùng chiều rộng.</p>
</body>
</html>

text align justify : Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau, điều này có nghĩa là trình duyệt sẽ tự động canh đều các dòng nội dung sao cho tất cả các dòng nội dung đều có cùng chiều rộng.

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

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ô tả
left	Căn chỉnh nội dung của phần tử sang bên trái.
right	Căn chỉnh nội dung của phần tử sang bên phải.
center	Căn chỉnh nội dung của phần tử sang chính giữa (center).
justify	Cố gắng điều chỉnh khoảng cách giữa các chữ (Hoặc các nội dung nội tuyến (inline content)) sao cho mỗi dòng (line) có độ dài bằng chiều rộng của phần tử hiện tại. Ngoại trừ dòng cuối.

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

 <!DOCTYPE html> <html> <head> <title>CSS text-align</title> <meta charset="UTF-8"/> <style> #my-div { background-color: #eee; min-height: 135px; padding: 5px; text-align: left; } #my-div span { background-color: yellow; } </style> <script> function changeTextAlign(event) { var textAlign = event.target.value; var div = document.getElementById("my-div"); div.style.textAlign = textAlign; } </script> </head> <body> <h2>CSS text-align</h2> <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br> <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br> <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br> <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br> <hr/> <div id = "my-div"> Apollo 11 was the spaceflight that landed the first humans, Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>, on the Moon on July 20, 1969, at 20:18 UTC. <span>Armstrong</span> became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. <span>Armstrong</span> spent about three and a half two and a half hours outside the spacecraft, <span>Aldrin</span> 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,... </div> </body> </html>

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ư <span>,.. 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

 <!DOCTYPE html> <html> <head> <title>CSS text-align</title> <meta charset="UTF-8"/> <style> #div1 { background-color: #eee; min-height: 135px; padding: 5px; text-align: left; } #div1 span { background-color: yellow; } #div2 { background-color: yellow; width: 180px; height: 50px; padding: 5px; margin-top: 10px; } </style> <script> function changeTextAlign(event) { var textAlign = event.target.value; var div1 = document.getElementById("div1"); div1.style.textAlign = textAlign; } </script> </head> <body> <h2>CSS text-align</h2> <input type="radio" name="my-radio" value="left" onclick="changeTextAlign(event)" checked/> Left<br> <input type="radio" name="my-radio" value="right" onclick="changeTextAlign(event)"/> Right<br> <input type="radio" name="my-radio" value="center" onclick="changeTextAlign(event)"/> Center<br> <input type="radio" name="my-radio" value="justify" onclick="changeTextAlign(event)"/> Justify<br> <hr/> <p style="font-style:italic;color:red;"> CSS text-align cannot align child block elements. </p> <div id = "div1"> Apollo 11 was the spaceflight that landed the first humans, Americans <span>Neil Armstrong</span> and <span>Buzz Aldrin</span>, on the Moon on July 20, 1969, at 20:18 UTC. <span>Armstrong</span> became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. <span>Armstrong</span> spent about three and a half two and a half hours outside the spacecraft, <span>Aldrin</span> 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,... <div id = "div2"> I am div2, A block element. </div> </div> </body> </html>

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

margin-auto-example.html

 <!DOCTYPE html> <html> <head> <title>CSS margin:auto</title> <meta charset="UTF-8"/> <style> .div1 { background-color: #eee; min-height: 135px; padding: 5px; text-align: center; } .div2 { background-color: yellow; width: 180px; height: 50px; padding: 5px; margin-top: 10px; } </style> </head> <body> <h2>CSS margin:auto</h2> <hr/> <div class = "div1"> I am div1 {text-align: center;} <div class="div2" style="margin-left:auto;margin-right:auto;"> margin-left:auto;<br/> margin-right:auto; </div> <div class="div2" style="margin-right:auto;"> margin-right:auto; </div> <div class="div2" style="margin-left:auto;"> margin-left:auto; </div> </div> </body> </html>

Tải thêm tài liệu liên quan đến bài viết Hướng dẫn text-align html

Hướng dẫn text-align html

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

Cấu trúc

HTML viết:

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

CSS viết:

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

Trình duyệt hỗ trợ

Thuộc tính text-align

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

1- CSS text-align

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Token Data

Quảng Cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội