STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

    Các Phương Pháp Canh Giữa 1 Trang Web

    Canh giữa website với CSS bằng 2 cách đơn giản - margin và flex.
    25/05/2021 28/07/2021 2 phút đọc
    Các Phương Pháp Canh Giữa 1 Trang Web

    Bài viết hướng dẫn canh giữa trang web với CSS bằng 2 cách - margindisplay: flex.

    Canh giữa trang web với margin

    Nguyên tắc của thuộc tính margin khi gán giá trị auto trái (margin-left: auto) hoặc phải (margin-right: auto) sẽ chiếm phần còn thừa của block chứa nó.

    __________________________________________
    |A                                       |
    |                         ______________ |
    |                         |B           | |
    |                         |margin-left | |
    | <---------------------> |auto        | |
    |                         |____________| |
    |________________________________________|
    
    __________________________________________
    |A                                       |
    | ______________                         |
    | |B           |                         |
    | |margin-right|                         |
    | |auto        | <---------------------> |
    | |____________|                         |
    |________________________________________|

    Khi muốn 1 block nằm ở giữa 1 block khác, có thể sử dụng đặt tính này bằng cách sử dụng margin-left: automargin-right: auto đồng thời, điều này nghĩa là block ở bên trong sẽ chiếm "phần còn lại" để margin cho 2 bên, 2 phần này sẽ đều nhau, tạo nên hiệu ứng canh giữa cho 1 block trong 1 block khác.

    .B {
        margin-left: auto;
        margin-right: auto;
    }
    __________________________________________
    |A             ____________              |
    |              |B         |              |
    | <----------> |          | <----------> |
    |              |          |              |
    |              |__________|              |
    |________________________________________|

    Canh giữa trang web với display: flex

    Thuộc tính display: flex hỗ trợ nhiều phương pháp sắp xếp các phần tử bên trong nó, trong đó có thể sắp xếp giữa dù là block hay chuỗi theo chiều ngang lẫn chiều dọc.

    Ở block chứa block cần canh giữa, có thể gán các thuộc tính với giá trị như bên dưới.

    .A {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    __________________________________________
    |A             ____________              |
    |              |B         |              |
    | <----------> |          | <----------> |
    |              |          |              |
    |              |__________|              |
    |________________________________________|

    Nên sử dụng cách nào?

    Đối với đa phần các trang web sử dụng cách canh giữa bằng margin-left/margin-right auto. Do đó, các frontend developer có thể sử dụng cách này.

    display: flex xuất hiện từ CSS3 và đến thời điểm hiện tại đã ổn định, do đó các developer có thể xem xét thay đổi qua cách làm mới này để có nhiều lựa chọn và hiện đại hơn.

    0 Bình luận
    STDIO Training

    STDIO Training

    Trung tâm đào tạo lập trình cho doanh nghiệp

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021