Align là sự thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh [align] một phần tử như margin, padding, text-align, position, float... Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh. là sự thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh [align] một phần tử như margin, padding, text-align, position, float... Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh.
Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu một số align thường hay sử dụng nhất. Mời bạn đọc theo dõi.
Căn giữa cho phần tử - Sử dụng margin:auto
Trong CSS, để căn giữa một phần tử khối [như ], ta sử dụng thuộc tính margin có giá trị là auto để căn chỉnh phần tử nằm ở giữa so với phần tử cha của nó.margin có giá trị là auto để căn chỉnh phần tử nằm ở giữa so với phần tử cha của nó.
Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề:
.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;}
Ví dụ:
.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Lưu ý::
- Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
- Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.
- Có thể ghi đè lại phần tử hiển thị block hay inline bằng cách sử dụng thuộc tính display. Ví dụ: span { display: block;}.
Căn giữa hình ảnh
Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.
img {display: block;margin-left: auto;margin-right: auto;width: 40%;}
Ví dụ:
img {display: block;margin-left: auto;margin-right: auto;}
Căn giữa hình ảnh
Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.
Lưu ý:
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
- Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.
- Có thể ghi đè lại phần tử hiển thị block hay inline bằng cách sử dụng thuộc tính display. Ví dụ: span { display: block;}.
- Căn giữa hình ảnh
Ví dụ:
.center {text-align: center;border: 3px solid purple;}
.left {text-align: left;border: 3px solid purple;}.right {text-align: right;border: 3px solid purple;
Căn giữa
Website Quản trị mạng
Căn trái
Website Quản trị mạng
Căn phải
Website Quản trị mạng
Lưu ý:: Thuộc tính text-align cũng chỉ áp dụng cho phần tử block vì inline chỉ chiếm độ rộng vừa đủ nội dung của nó.
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.
Có thể ghi đè lại phần tử hiển thị block hay inline bằng cách sử dụng thuộc tính display. Ví dụ: span { display: block;}.position: absolute.
.right {position: absolute;right: 0px;width: 300px;border: 3px solid purple;padding: 10px;}
Ví dụ:
.right {position: absolute;right: 0px;width: 300px;border: 3px solid purple;padding: 10px;}
Căn phải sử dụng position
Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
hội thông qua địa chỉ email hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Lưu ý:
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa. cũng được sử dụng để căn chỉnh phần tử.
.right {float: right;width: 300px;border: 3px solid purple;padding: 10px;}
Ví dụ:
.right {float: right;width: 300px;border: 3px solid purple;padding: 10px;}
Căn phải sử dụng float
Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...
Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
hội thông qua địa chỉ email hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Lưu ý:: Nếu một phần tử đang được float cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để khắc phục, ta sử dụng clearfix overflow: auto:
.clearfix {overflow: auto;}
0.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.padding.
1.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Ví dụ:
2.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Lưu ý:
3.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.
4.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Ví dụ:
5.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Lưu ý:
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.position và transform:
6.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Ví dụ:
7.center {margin: auto;width: 60%;border: 3px solid purple;padding: 10px;}
Căn giữa cho phần tử
Để căn giữa theo chiều ngang cho một phần tử khối [như div] bạn có thể sử
dụng margin: auto.
Note: Phần tử sau khi chiếm không gian nhất định, khoảng trống còn
lại sẽ được chia đều cho hai bên lề.
Lưu ý:: Thuộc tính transform không được hỗ trợ trong IE8 và các phiên bản trước đó.
Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính width [hoặc width có giá trị là 100%] vì nó chiếm hết động rộng sẵn có, không thể căn giữa được nữa.
Thuộc tính margin: auto chỉ căn giữa cho phần tử block như , , đến , , , , ... còn các phần tử inline như , , , , ... sẽ không được áp dụng.