Hướng dẫn này trình bày quy trình căn chỉnh ngang và dọc bằng CSS.
Làm cách nào để căn chỉnh ngang và dọc bằng CSS?
Các nhà phát triển sử dụng căn chỉnh “ngang” và “dọc” để sắp xếp và định vị các thành phần trên trang web theo cách có tổ chức hơn. Chúng có thể hữu ích trong việc căn chỉnh các phần tử và nội dung, định vị các nút hoặc biểu tượng, v.v. Hãy làm theo các ví dụ dưới đây để hiểu rõ hơn:
Căn ngang
Trong CSS, thuộc tính text-align được sử dụng để căn chỉnh văn bản theo chiều ngang trong phần tử cha của nó. Truy cập các đoạn mã dưới đây để hiểu rõ hơn:
< thân hình >
< div lớp học = 'tài khoản' >
< div lớp học = 'căn lề trái' > Linuxhint được căn trái < / div >
< div lớp học = 'Căn giữa' > Linuxhint là Căn giữa < / div >
< div lớp học = 'căn phải' > Linuxhint là Right Align < / div >
< / div >
< / thân hình >
Trong đoạn mã trên:
- Đầu tiên, cha mẹ “ div ” phần tử được sử dụng với thuộc tính lớp có giá trị là “ tài khoản ”.
- Tiếp theo, ba phần tử con đã được tạo và thuộc tính lớp đã được gán cho mỗi div.
- Cuối cùng, các giá trị của “leftAlign”, “centerAlign” và “rightAlign” được cung cấp cho các lớp.
Bây giờ, hãy chèn các thuộc tính CSS sau vào “
.leftAlign {
trưng bày : chặn Nội tuyến ;
chiều rộng : 30% ;
đệm : 20px ;
màu nền : rừng xanh ;
căn chỉnh văn bản : bên trái ;
}
.centerAlign {
trưng bày : chặn Nội tuyến ;
chiều rộng : 30% ;
màu nền : màu đỏ ;
đệm : 20px ;
căn chỉnh văn bản : trung tâm ;
}
.rightAlign {
trưng bày : chặn Nội tuyến ;
chiều rộng : 30% ;
màu nền : xanh mòng két ;
đệm : 20px ;
căn chỉnh văn bản : Phải ;
}
Trong khối mã trên:
- Đầu tiên, cả ba lớp được chọn riêng biệt, sau đó áp dụng các thuộc tính CSS “ trưng bày ”, “ chiều rộng ”, “ màu nền ' Và ' đệm ' đối với họ. Các thuộc tính này được sử dụng để tăng cường các mục đích trực quan hóa.
- Tiếp theo, các giá trị của “ bên trái ”, “ trung tâm ' Và ' Phải ” được cung cấp cho “ căn chỉnh văn bản ” tài sản cho “ căn trái ”, “ căn giữa ', Và ' căn phải ” các lớp tương ứng.
Sau quá trình biên dịch, các phần tử HTML trông như thế này:
Ảnh chụp nhanh trình duyệt ở trên cho thấy các phần tử được căn chỉnh theo chiều ngang ở các vị trí bên trái, giữa và bên phải.
Căn dọc
CSS “ canh dọc ” thuộc tính căn chỉnh phần tử đã chọn với thuộc tính “ trục y ” trong phần tử cha của chúng. Các giá trị có thể có cho thuộc tính “vertical-align” là “ đường cơ sở ”, “ phụ ”, “ siêu ”, “ đứng đầu ”, “ văn bản trên cùng ”, “ ở giữa ”, “ đáy ', Và ' văn bản dưới cùng ”. Tuy nhiên, các nhà phát triển chủ yếu sử dụng các giá trị “trên cùng”, “ở giữa” và “dưới cùng” trong khi tạo các thiết kế trang web. Để căn chỉnh phần tử HTML đã chọn ở vị trí trên cùng, hãy truy cập đoạn mã dưới đây:
< div lớp học = 'đếm' >< hình ảnh src = 'hiunsplash.jpg' chiều rộng = '200px' chiều cao = '200px' >
< nhịp lớp học = 'chú thíchTopAlign' > Văn bản này được căn trên cùng theo chiều dọc bên cạnh hình ảnh < / nhịp >
< / div >
Trong đoạn mã trên:
- Đầu tiên, hãy tạo cha mẹ “ div ” phần tử và gán giá trị của “ đếm ” đến “ lớp học ' thuộc tính.
- Bên trong vùng chứa chính, hãy sử dụng “
” và cung cấp đường dẫn của hình ảnh dưới dạng giá trị cho “ src ' thuộc tính.
- Ngoài ra, hãy cung cấp giá trị của “ 200px ” đến cả “ chiều rộng ' Và ' chiều cao ” thuộc tính của “
' nhãn.
- Tiếp theo, sử dụng “ ” gắn thẻ và cung cấp cho nó một lớp “ chú thíchTopAlign ”. Cuối cùng, cung cấp dữ liệu giả cho nó.
Bây giờ, hãy thêm các thuộc tính CSS để tạo kiểu cho các phần tử HTML:
.đếm {chiều rộng : nội dung phù hợp ;
trưng bày : khối ;
lề trái : 100px ;
đệm : 10px ;
ranh giới : 2px chất rắn màu đỏ ;
}
.captionTopAlign {
thẳng đứng
Trong khối mã trên:
- Đầu tiên, chọn cha mẹ “ đếm ” lớp và cung cấp các giá trị của “fit-content”, “block”, “100px”, “10px” và “2px solid red” cho CSS “ chiều rộng ”, “ trưng bày ”, “ lề trái ”, “ đệm ' Và ' ranh giới ' của cải. Các thuộc tính này được sử dụng để tạo kiểu cho phần tử cha.
- Tiếp theo, chọn “ chú thíchTopAlign ” lớp và cung cấp giá trị của “ đứng đầu ” đến CSS “ canh dọc ' tài sản. Điều này làm cho phần tử HTML thẳng hàng ở vị trí trên cùng.
Sau khi thực hiện các dòng mã trên, trang web sẽ xuất hiện như thế này:
Ảnh chụp nhanh ở trên cho thấy phần tử HTML đã chọn hiện được căn trên cùng. Theo cách tương tự, phần tử có thể được căn chỉnh theo hướng giữa, hướng dưới, v.v.
Phần kết luận
Đối với căn chỉnh theo chiều ngang và dọc, “ căn chỉnh văn bản ' Và ' canh dọc ” Các thuộc tính CSS được sử dụng tương ứng. Thuộc tính “text-align” cho phép giá trị của “ bên trái ”, “ Phải ”, “ trung tâm ' Và ' biện minh ”. Mặt khác, các giá trị có thể có cho thuộc tính “vertical-align” là “ đường cơ sở ”, “ phụ ”, “ siêu ”, “ đứng đầu ”, “ văn bản trên cùng ”, “ ở giữa ”, “ đáy ', Và ' văn bản dưới cùng ”. Căn ngang và dọc giúp tạo ra các thiết kế web rõ ràng và chuyên nghiệp.