Làm cách nào tôi có thể căn giữa văn bản (theo chiều ngang và chiều dọc) bên trong div

Lam Cach Nao Toi Co The Can Giua Van Ban Theo Chieu Ngang Va Chieu Doc Ben Trong Div



Trong khi thiết kế trang web, nhà phát triển có thể thêm nhiều thành phần khác nhau, bao gồm hình ảnh, văn bản, bảng và các thành phần khác. Hơn nữa, văn bản có thể được căn giữa trong div bằng cách sử dụng nhiều thuộc tính CSS. Phương pháp phổ biến nhất để căn giữa văn bản theo chiều ngang là sử dụng “ căn chỉnh văn bản ' thuộc tính. Hơn nữa, bạn cũng có thể sử dụng “ chiều cao giữa các dòng ' Và ' canh dọc ” thuộc tính để căn chỉnh văn bản theo chiều dọc.

Bài đăng này sẽ nêu phương pháp căn giữa văn bản theo chiều dọc cũng như chiều ngang bên trong div.:







Làm cách nào để căn giữa văn bản theo chiều ngang bên trong div?

Để căn giữa văn bản theo chiều ngang bên trong div, hãy xem quy trình đã cho.



Bước 1: Tạo div Container



Ban đầu, hãy tạo một vùng chứa div với sự trợ giúp của “

' yếu tố. Sau đó, chèn một “ nhận dạng ” thuộc tính bên trong thẻ mở div. Sau đó, nhúng một số văn bản vào giữa thẻ div:





< div nhận dạng = 'căn chỉnh nội dung' >
Linuxhint là một trong những trang web tốt nhất sáng tạo nội dung.
div >


đầu ra


Bước 2: Truy cập div Container để căn giữa văn bản



Bây giờ, hãy truy cập vùng chứa div với sự trợ giúp của “ nhận dạng ” tên thuộc tính với bộ chọn “ # ” và áp dụng các thuộc tính CSS sau:

#align-content{
chiều rộng: 80 % ;
lề: 0 tự động;
phần đệm: 20px;
lý lịch: #c8edf3;
căn chỉnh văn bản: trung tâm;
màu sắc: rgb ( 49 , mười lăm , 240 ) ;
}


Đây:

    • chiều rộng ” thuộc tính được sử dụng để đặt kích thước chiều rộng của vùng chứa.
    • lề ” chỉ định một khoảng trống bên ngoài vùng chứa.
    • đệm ” xác định một khoảng trống bên trong ranh giới của phần tử.
    • lý lịch ” đặt màu nền ở mặt sau của phần tử.
    • căn chỉnh văn bản ” thuộc tính được sử dụng để đặt căn chỉnh của văn bản là “ trung tâm ”.
    • màu sắc ” chỉ định màu cho văn bản bên trong ranh giới.

Có thể thấy rằng chúng ta đã căn giữa thành công văn bản được căn chỉnh theo chiều ngang bên trong div đã tạo:

Làm cách nào để căn giữa văn bản theo chiều dọc bên trong div?

Để căn giữa văn bản theo chiều dọc bên trong vùng chứa div, hãy làm theo hướng dẫn được cung cấp.

Bước 1: Truy cập div Container

Trước hết, truy cập vùng chứa div đã tạo.

Bước 2: Áp dụng các thuộc tính CSS cho Văn bản ở giữa theo chiều dọc

Sau đó, áp dụng các thuộc tính CSS được liệt kê bên dưới để căn giữa văn bản theo chiều dọc trong div:

#align-content{
hiển thị: ô bảng;
chiều rộng: 300px;
chiều cao: 150px;
phần đệm: 10px;
màu: xanh lam;
màu nền: rgb ( 248 , 215 , 166 ) ;
đường viền: nét đứt 3px #f09d03;
căn dọc: giữa;
}


Theo đoạn mã trên:

    • Đặt “ trưng bày ” chỉ định hành vi hiển thị của phần tử là “ ô bảng ”, có nghĩa là nó hoạt động giống như ô của bảng trong phần tử div.
    • chiều rộng ” thuộc tính chỉ định kích thước chiều rộng phần tử.
    • chiều cao ” đặt chiều cao của phần tử.
    • đệm ” định nghĩa một khoảng trống bên trong phần tử.
    • màu sắc ” được sử dụng để đặt màu cho văn bản bên trong phần tử.
    • màu nền ” chỉ định màu của mặt sau của phần tử.
    • ranh giới ” thuộc tính xác định một ranh giới trên một phần tử.
    • canh dọc ” thuộc tính được sử dụng để đặt căn chỉnh theo chiều dọc của một phần tử được xác định trong “ ở giữa ”.

đầu ra


Bạn đã tìm hiểu về quy trình hoàn chỉnh để căn giữa văn bản bên trong vùng chứa theo cả hai cách, theo chiều dọc và chiều ngang.

Phần kết luận

Để căn giữa văn bản theo chiều dọc và chiều ngang bên trong div, trước tiên, hãy tạo vùng chứa div với sự trợ giúp của phần tử

và truy cập phần tử đó bằng cách sử dụng bộ chọn. Sau đó, áp dụng các thuộc tính CSS trong đó “ căn chỉnh văn bản ” thuộc tính được sử dụng để căn chỉnh theo chiều ngang và “ canh dọc ” thiết lập căn chỉnh theo chiều dọc. Bài đăng này trình bày các phương pháp căn giữa văn bản theo chiều dọc và chiều ngang bên trong div.