Hướng dẫn và ví dụ CSS text-align
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>
<h1>CSS text-align</h1>
<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>
<h1>CSS text-align</h1>
<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>
<h1>CSS margin:auto</h1>
<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>Các hướng dẫn CSS
- Các đơn vị tính trong CSS
- Hướng dẫn và ví dụ CSS Selectors cơ bản
- Hướng dẫn và ví dụ CSS Attribute Selector
- Hướng dẫn và ví dụ CSS Selectors kết hợp
- Hướng dẫn và ví dụ CSS Backgrounds
- Hướng dẫn và ví dụ CSS Opacity
- Hướng dẫn và ví dụ CSS Padding
- Hướng dẫn và ví dụ CSS Margins
- Hướng dẫn và ví dụ CSS Borders
- Hướng dẫn và ví dụ CSS Outline
- Hướng dẫn và ví dụ CSS box-sizing
- Hướng dẫn và ví dụ CSS max-width và min-width
- Các từ khóa min-content, max-content, fit-content, stretch trong CSS
- Hướng dẫn và ví dụ CSS Links
- Hướng dẫn và ví dụ CSS Fonts
- Tìm hiểu về Generic Font Family trong CSS
- Hướng dẫn và ví dụ CSS @font-face
- Hướng dẫn và ví dụ CSS Align
- Hướng dẫn và ví dụ CSS Cursors
- Hướng dẫn và ví dụ CSS Overflow
- Hướng dẫn và ví dụ CSS Lists
- Hướng dẫn và ví dụ CSS Tables
- Hướng dẫn và ví dụ CSS visibility
- Hướng dẫn và ví dụ CSS Display
- Hướng dẫn và ví dụ CSS Grid Layout
- Hướng dẫn và ví dụ CSS Float và Clear
- Hướng dẫn và ví dụ CSS Position
- Hướng dẫn và ví dụ CSS line-height
- Hướng dẫn và ví dụ CSS text-align
- Hướng dẫn và ví dụ CSS text-decoration
Show More
