Căn Giữa Phần Tử Trong Css

Có phải bạn đang tìm kiếm chủ đề về => Căn Giữa Phần Tử Trong Css phải ko? Nếu đúng tương tự thì mời bạn xem nó ngay tại đây. Xem thêm các bài viết hay khác tại đây => Tin Tức

Căn giữa một phần tử trong css – nghe có vẻ đơn giản nhưng khá phức tạp 😢. Mỗi lúc tôi viết xong đoạn css được căn giữa và đọc lại: Vì sao tôi lại viết cái đống tào lao dài dằng dặc này chỉ để làm một việc đơn giản tương tự. Vì vậy trong bài viết này tôi xin giới thiệu từng trường hợp cụ thể cùng với giải pháp tối ưu tương ứng, kỳ vọng sẽ giúp các bạn dễ dàng hơn trong việc xử lý. Trước tiên, tôi muốn liệt kê các khối nội tuyến và khối phổ quát để mọi người vận dụng:

  • Chặn các thẻ:

    ,

      ,

        ,

        ,

        ,…
      1. Thẻ nội tuyến: , , , ,… Và đặc trưng – tương tự như
        nhưng ở dạng nội tuyến

    Hiện thời bạn cần phải căn giữa….

    Bạn đang xem: căn giữa trong css

    Nằm ngang:

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    Bạn có thể căn giữa các phần tử nội tuyến theo chiều ngang, bên trong một phần tử khối là thẻ mẹ, với cách đơn giản sau:

    .center-children {text-align: center; }

    ví dụ: hoigi.info/chriscoyier/pen/HulzB Tính chất text-align sẽ căn giữa thành inline, inline-block, inline-table, inline-flex, …

    2. Với 1 phần tử khối

    Bạn có thể căn giữa một phần tử khối bằng cách đặt các trị giá lề trái và lề phải của nó thành tự động (và nó phải được đặt chiều rộng nếu ko nó sẽ chiếm toàn thể chiều rộng và cũng ko cần căn giữa), có thể viết tắt cú pháp có thể được sử dụng như sau:

    .center-me {margin: 0 auto; }

    ví dụ: hoigi.info/chriscoyier/pen/eszon Xem xét: Bạn ko thể sử dụng float trên phần tử căn giữa. Có một vài mẹo nhỏ, bạn có thể tham khảo tại đây: hoigi.info/float-center/

    3. Với nhiều hơn 1 khối. yếu tố

    Nếu bạn có 2 hoặc nhiều phần tử khối cần được căn giữa theo chiều ngang trong một hàng, tốt nhất nên thay đổi màn tạo nên một kiểu khác (ví dụ: khối nội tuyến). Đây là một ví dụ sử dụng inline-block và flex:

    .inline-block-center {text-align: center; } .inline-block-center div {display: inline-block; text-align: left; } .flex-center {display: flex; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/ebing

    Thẳng đứng:

    Căn giữa theo chiều dọc trong css phức tạp hơn một tẹo.

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    1.1 Trên một dòng

    Đôi lúc các phần tử nội tuyến / văn bản có thể được căn giữa theo chiều dọc bằng cách đặt padding-top và padding-bottom bằng nhau.

    .link {padding-top: 30px; padding-bottom: 30px; }

    ví dụ: hoigi.info/chriscoyier/pen/ldcwq Vì một số lý do bạn ko thể sử dụng padding, thì bạn cũng có thể đặt chiều cao dòng bằng heigth:

    .center-text-trick {height: 100px; line-height: 100px; khoảng trắng: nowrap; }

    Đọc thêm: Cách bật tắt đèn bàn phím máy tính bảng Dell, HP, Asus, Acer, Vaio, Lenovo, Macbook

    ví dụ: hoigi.info/chriscoyier/pen/LxHmK

    1.2 Trên nhiều dòng

    Việc thăng bằng padding-top và padding-bottom cũng có thể căn giữa nhiều dòng văn bản, nhưng sẽ ko hoạt động đối với văn bản / nội dòng nằm bên trong ô bảng, chẳng hạn. Sử dụng căn chỉnh theo chiều dọc có ý nghĩa hơn trong trường hợp này.

    .center-table {vertical-align: middle; }

    ví dụ: hoigi.info/chriscoyier/pen/ekoFx Ngoài ra, bạn cũng có thể sử dụng flexbox với tính chất flex-direction:

    .flex-center-vertical {display: flex; justify-content: trung tâm; flex-hướng: cột; chiều cao: 400px; }

    ví dụ: hoigi.info/chriscoyier/pen/uHygv Ghi chú: 2 cách trên chỉ thực sự hiệu quả lúc phần tử mẹ có chiều cao cố định (px,%, ..) Yếu tố ma Nếu cả hai phương pháp trên đều ko hoạt động, hiện giờ bạn có thể sử dụng kỹ thuật phần tử ma: Tạo phần tử giả (phần tử ảo) với chiều cao đầy đủ được đặt bên trong phần tử vùng chứa mẹ. các phần tử nội tuyến và các phần tử nội tuyến này được căn giữa theo chiều dọc dựa trên phần tử giả nhưng mà chúng tôi tạo.

    .ghost-center {vị trí: tương đối; } .ghost-center :: before {content: “”; display: inline-block; chiều cao: 100%; chiều rộng: 1%; vertical-align: giữa; } .ghost-center p {display: inline-block; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/ofwgD

    2. Với một phần tử khối.

    2.1 Chiều cao đã biết – chiều cao

    Nếu bạn biết chiều cao của phần tử, bạn có thể căn giữa nó theo chiều dọc bằng cách làm như sau:

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chiều cao: 100px; margin-top: -50px; / * tính tới padding và border nếu ko sử dụng box-sizing: border-box; * /}

    ví dụ: hoigi.info/chriscoyier/pen/HiydJ

    2.2 Chiều cao ko xác định – chiều cao ko xác định

    Vẫn có thể căn giữa các phần tử có chiều cao chưa biết bằng cách tăng phần trên lên một nửa chiều cao thuở đầu và sau đó dịch chuyển nó một nửa theo chiều dọc.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chuyển đổi: translateY (-50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lpema

    2.3 Định tâm sẽ tác động tới chiều cao – chiều cao

    Nếu bạn ko quan tâm rằng chiều cao có thể được kéo dài và mục tiêu chính vẫn là căn giữa, thì hãy sử dụng bảng hoặc hiển thị CSS để biến phần tử thành bảng để thực hiện thủ thuật này.

    chính {vị trí: tương đối; hiển thị: bảng; } main div {display: table-cell; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/RmeWvQ

    3. Sử dụng flexbox

    Tham khảo: Cách chiếu màn hình điện thoại lên máy tính

    Ko có gì ngạc nhiên lúc sử dụng flexbox có vẻ là cách dễ nhất trong số các cách được nêu ở trên.

    .parent {display: flex; flex-hướng: cột; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/FqDyi

    Theo cả chiều ngang và chiều dọc:

    Bạn có thể liên kết các kỹ thuật căn giữa ở trên để thực hiện cả căn giữa theo chiều ngang và dọc, nhưng bạn cũng có thể sử dụng các phương pháp sau:

    1. Chiều rộng và chiều cao cố định. yếu tố

    Sử dụng lề âm bằng một nửa chiều cao và chiều rộng, sau đó đặt vị trí thành tuyệt đối và đặt trên cùng và bên trái thành 50% sẽ căn giữa tuyệt vời trong nhiều trình duyệt.

    .parent {vị trí: tương đối; } .child {width: 300px; chiều cao: 100px; đệm: 20px; vị trí: tuyệt đối; top: 50%; trái: 50%; lề: -70px 0 0 -170px; }

    ví dụ: hoigi.info/chriscoyier/pen/JGofm

    2. Phần tử ko biết chiều rộng và chiều cao

    Nếu bạn ko biết chiều cao hoặc chiều rộng, bạn có thể sử dụng tính chất chuyển đổi và sau đó dịch 50% của cả chiều cao và chiều rộng sang căn giữa cả hai bên.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; trái: 50%; chuyển đổi: dịch (-50%, -50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lgFiq

    3. Sử dụng flexbox

    Ko gì dễ dàng hơn việc sử dụng flexbox để căn giữa.

    .parent {display: flex; justify-content: trung tâm; align-các mục: trung tâm; }

    4. Sử dụng lưới

    Đây là một mẹo nhỏ hoạt động khá tốt với một phần tử.

    body, html {height: 100%; hiển thị: lưới; } span {/ * điều vào giữa * / margin: auto; }

    ví dụ: hoigi.info/chriscoyier/pen/NvwpyK

    Kết luận

    Giờ đây, bạn có thể căn chỉnh mọi thứ bạn muốn trong CSS một cách đơn giản nhất có thể.

    Xem thêm: Quà tặng sinh nhật cho người yêu

    Tham khảo


Thông tin thêm

Căn Giữa Phần Tử Trong Css

Căn giữa một phần tử trong css - nghe có vẻ đơn giản nhưng khá phức tạp 😢. Mỗi lúc tôi viết xong đoạn css được căn giữa và đọc lại: Vì sao tôi lại viết cái đống tào lao dài dằng dặc này chỉ để làm một việc đơn giản tương tự. Vì vậy trong bài viết này tôi xin giới thiệu từng trường hợp cụ thể cùng với giải pháp tối ưu tương ứng, kỳ vọng sẽ giúp các bạn dễ dàng hơn trong việc xử lý. Trước tiên, tôi muốn liệt kê các khối nội tuyến và khối phổ quát để mọi người vận dụng:

  • Chặn các thẻ:

    ,

      ,

        ,

        ,

        ,…
      1. Thẻ nội tuyến: , , , ,… Và đặc trưng - tương tự như
        nhưng ở dạng nội tuyến

    Hiện thời bạn cần phải căn giữa….

    Bạn đang xem: căn giữa trong css

    Nằm ngang:

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    Bạn có thể căn giữa các phần tử nội tuyến theo chiều ngang, bên trong một phần tử khối là thẻ mẹ, với cách đơn giản sau:

    .center-children {text-align: center; }

    ví dụ: hoigi.info/chriscoyier/pen/HulzB Tính chất text-align sẽ căn giữa thành inline, inline-block, inline-table, inline-flex, ...

    2. Với 1 phần tử khối

    Bạn có thể căn giữa một phần tử khối bằng cách đặt các trị giá lề trái và lề phải của nó thành tự động (và nó phải được đặt chiều rộng nếu ko nó sẽ chiếm toàn thể chiều rộng và cũng ko cần căn giữa), có thể viết tắt cú pháp có thể được sử dụng như sau:

    .center-me {margin: 0 auto; }

    ví dụ: hoigi.info/chriscoyier/pen/eszon Xem xét: Bạn ko thể sử dụng float trên phần tử căn giữa. Có một vài mẹo nhỏ, bạn có thể tham khảo tại đây: hoigi.info/float-center/

    3. Với nhiều hơn 1 khối. yếu tố

    Nếu bạn có 2 hoặc nhiều phần tử khối cần được căn giữa theo chiều ngang trong một hàng, tốt nhất nên thay đổi màn tạo nên một kiểu khác (ví dụ: khối nội tuyến). Đây là một ví dụ sử dụng inline-block và flex:

    .inline-block-center {text-align: center; } .inline-block-center div {display: inline-block; text-align: left; } .flex-center {display: flex; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/ebing

    Thẳng đứng:

    Căn giữa theo chiều dọc trong css phức tạp hơn một tẹo.

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    1.1 Trên một dòng

    Đôi lúc các phần tử nội tuyến / văn bản có thể được căn giữa theo chiều dọc bằng cách đặt padding-top và padding-bottom bằng nhau.

    .link {padding-top: 30px; padding-bottom: 30px; }

    ví dụ: hoigi.info/chriscoyier/pen/ldcwq Vì một số lý do bạn ko thể sử dụng padding, thì bạn cũng có thể đặt chiều cao dòng bằng heigth:

    .center-text-trick {height: 100px; line-height: 100px; khoảng trắng: nowrap; }

    Đọc thêm: Cách bật tắt đèn bàn phím máy tính bảng Dell, HP, Asus, Acer, Vaio, Lenovo, Macbook

    ví dụ: hoigi.info/chriscoyier/pen/LxHmK

    1.2 Trên nhiều dòng

    Việc thăng bằng padding-top và padding-bottom cũng có thể căn giữa nhiều dòng văn bản, nhưng sẽ ko hoạt động đối với văn bản / nội dòng nằm bên trong ô bảng, chẳng hạn. Sử dụng căn chỉnh theo chiều dọc có ý nghĩa hơn trong trường hợp này.

    .center-table {vertical-align: middle; }

    ví dụ: hoigi.info/chriscoyier/pen/ekoFx Ngoài ra, bạn cũng có thể sử dụng flexbox với tính chất flex-direction:

    .flex-center-vertical {display: flex; justify-content: trung tâm; flex-hướng: cột; chiều cao: 400px; }

    ví dụ: hoigi.info/chriscoyier/pen/uHygv Ghi chú: 2 cách trên chỉ thực sự hiệu quả lúc phần tử mẹ có chiều cao cố định (px,%, ..) Yếu tố ma Nếu cả hai phương pháp trên đều ko hoạt động, hiện giờ bạn có thể sử dụng kỹ thuật phần tử ma: Tạo phần tử giả (phần tử ảo) với chiều cao đầy đủ được đặt bên trong phần tử vùng chứa mẹ. các phần tử nội tuyến và các phần tử nội tuyến này được căn giữa theo chiều dọc dựa trên phần tử giả nhưng mà chúng tôi tạo.

    .ghost-center {vị trí: tương đối; } .ghost-center :: before {content: ""; display: inline-block; chiều cao: 100%; chiều rộng: 1%; vertical-align: giữa; } .ghost-center p {display: inline-block; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/ofwgD

    2. Với một phần tử khối.

    2.1 Chiều cao đã biết - chiều cao

    Nếu bạn biết chiều cao của phần tử, bạn có thể căn giữa nó theo chiều dọc bằng cách làm như sau:

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chiều cao: 100px; margin-top: -50px; / * tính tới padding và border nếu ko sử dụng box-sizing: border-box; * /}

    ví dụ: hoigi.info/chriscoyier/pen/HiydJ

    2.2 Chiều cao ko xác định - chiều cao ko xác định

    Vẫn có thể căn giữa các phần tử có chiều cao chưa biết bằng cách tăng phần trên lên một nửa chiều cao thuở đầu và sau đó dịch chuyển nó một nửa theo chiều dọc.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chuyển đổi: translateY (-50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lpema

    2.3 Định tâm sẽ tác động tới chiều cao - chiều cao

    Nếu bạn ko quan tâm rằng chiều cao có thể được kéo dài và mục tiêu chính vẫn là căn giữa, thì hãy sử dụng bảng hoặc hiển thị CSS để biến phần tử thành bảng để thực hiện thủ thuật này.

    chính {vị trí: tương đối; hiển thị: bảng; } main div {display: table-cell; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/RmeWvQ

    3. Sử dụng flexbox

    Tham khảo: Cách chiếu màn hình điện thoại lên máy tính

    Ko có gì ngạc nhiên lúc sử dụng flexbox có vẻ là cách dễ nhất trong số các cách được nêu ở trên.

    .parent {display: flex; flex-hướng: cột; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/FqDyi

    Theo cả chiều ngang và chiều dọc:

    Bạn có thể liên kết các kỹ thuật căn giữa ở trên để thực hiện cả căn giữa theo chiều ngang và dọc, nhưng bạn cũng có thể sử dụng các phương pháp sau:

    1. Chiều rộng và chiều cao cố định. yếu tố

    Sử dụng lề âm bằng một nửa chiều cao và chiều rộng, sau đó đặt vị trí thành tuyệt đối và đặt trên cùng và bên trái thành 50% sẽ căn giữa tuyệt vời trong nhiều trình duyệt.

    .parent {vị trí: tương đối; } .child {width: 300px; chiều cao: 100px; đệm: 20px; vị trí: tuyệt đối; top: 50%; trái: 50%; lề: -70px 0 0 -170px; }

    ví dụ: hoigi.info/chriscoyier/pen/JGofm

    2. Phần tử ko biết chiều rộng và chiều cao

    Nếu bạn ko biết chiều cao hoặc chiều rộng, bạn có thể sử dụng tính chất chuyển đổi và sau đó dịch 50% của cả chiều cao và chiều rộng sang căn giữa cả hai bên.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; trái: 50%; chuyển đổi: dịch (-50%, -50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lgFiq

    3. Sử dụng flexbox

    Ko gì dễ dàng hơn việc sử dụng flexbox để căn giữa.

    .parent {display: flex; justify-content: trung tâm; align-các mục: trung tâm; }

    4. Sử dụng lưới

    Đây là một mẹo nhỏ hoạt động khá tốt với một phần tử.

    body, html {height: 100%; hiển thị: lưới; } span {/ * điều vào giữa * / margin: auto; }

    ví dụ: hoigi.info/chriscoyier/pen/NvwpyK

    Kết luận

    Giờ đây, bạn có thể căn chỉnh mọi thứ bạn muốn trong CSS một cách đơn giản nhất có thể.

    Xem thêm: Quà tặng sinh nhật cho người yêu

    Tham khảo


Căn giữa một phần tử trong css – nghe có vẻ đơn giản nhưng khá phức tạp 😢. Mỗi lúc tôi viết xong đoạn css được căn giữa và đọc lại: Vì sao tôi lại viết cái đống tào lao dài dằng dặc này chỉ để làm một việc đơn giản tương tự. Vì vậy trong bài viết này tôi xin giới thiệu từng trường hợp cụ thể cùng với giải pháp tối ưu tương ứng, kỳ vọng sẽ giúp các bạn dễ dàng hơn trong việc xử lý. Trước tiên, tôi muốn liệt kê các khối nội tuyến và khối phổ quát để mọi người vận dụng:

  • Chặn các thẻ:

    ,

      ,

        ,

        ,

        ,…
      1. Thẻ nội tuyến: , , , ,… Và đặc trưng – tương tự như
        nhưng ở dạng nội tuyến

    Hiện thời bạn cần phải căn giữa….

    Bạn đang xem: căn giữa trong css

    Nằm ngang:

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    Bạn có thể căn giữa các phần tử nội tuyến theo chiều ngang, bên trong một phần tử khối là thẻ mẹ, với cách đơn giản sau:

    .center-children {text-align: center; }

    ví dụ: hoigi.info/chriscoyier/pen/HulzB Tính chất text-align sẽ căn giữa thành inline, inline-block, inline-table, inline-flex, …

    2. Với 1 phần tử khối

    Bạn có thể căn giữa một phần tử khối bằng cách đặt các trị giá lề trái và lề phải của nó thành tự động (và nó phải được đặt chiều rộng nếu ko nó sẽ chiếm toàn thể chiều rộng và cũng ko cần căn giữa), có thể viết tắt cú pháp có thể được sử dụng như sau:

    .center-me {margin: 0 auto; }

    ví dụ: hoigi.info/chriscoyier/pen/eszon Xem xét: Bạn ko thể sử dụng float trên phần tử căn giữa. Có một vài mẹo nhỏ, bạn có thể tham khảo tại đây: hoigi.info/float-center/

    3. Với nhiều hơn 1 khối. yếu tố

    Nếu bạn có 2 hoặc nhiều phần tử khối cần được căn giữa theo chiều ngang trong một hàng, tốt nhất nên thay đổi màn tạo nên một kiểu khác (ví dụ: khối nội tuyến). Đây là một ví dụ sử dụng inline-block và flex:

    .inline-block-center {text-align: center; } .inline-block-center div {display: inline-block; text-align: left; } .flex-center {display: flex; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/ebing

    Thẳng đứng:

    Căn giữa theo chiều dọc trong css phức tạp hơn một tẹo.

    1. Với các phần tử nội dòng hoặc nội dòng- * (như văn bản hoặc liên kết)

    1.1 Trên một dòng

    Đôi lúc các phần tử nội tuyến / văn bản có thể được căn giữa theo chiều dọc bằng cách đặt padding-top và padding-bottom bằng nhau.

    .link {padding-top: 30px; padding-bottom: 30px; }

    ví dụ: hoigi.info/chriscoyier/pen/ldcwq Vì một số lý do bạn ko thể sử dụng padding, thì bạn cũng có thể đặt chiều cao dòng bằng heigth:

    .center-text-trick {height: 100px; line-height: 100px; khoảng trắng: nowrap; }

    Đọc thêm: Cách bật tắt đèn bàn phím máy tính bảng Dell, HP, Asus, Acer, Vaio, Lenovo, Macbook

    ví dụ: hoigi.info/chriscoyier/pen/LxHmK

    1.2 Trên nhiều dòng

    Việc thăng bằng padding-top và padding-bottom cũng có thể căn giữa nhiều dòng văn bản, nhưng sẽ ko hoạt động đối với văn bản / nội dòng nằm bên trong ô bảng, chẳng hạn. Sử dụng căn chỉnh theo chiều dọc có ý nghĩa hơn trong trường hợp này.

    .center-table {vertical-align: middle; }

    ví dụ: hoigi.info/chriscoyier/pen/ekoFx Ngoài ra, bạn cũng có thể sử dụng flexbox với tính chất flex-direction:

    .flex-center-vertical {display: flex; justify-content: trung tâm; flex-hướng: cột; chiều cao: 400px; }

    ví dụ: hoigi.info/chriscoyier/pen/uHygv Ghi chú: 2 cách trên chỉ thực sự hiệu quả lúc phần tử mẹ có chiều cao cố định (px,%, ..) Yếu tố ma Nếu cả hai phương pháp trên đều ko hoạt động, hiện giờ bạn có thể sử dụng kỹ thuật phần tử ma: Tạo phần tử giả (phần tử ảo) với chiều cao đầy đủ được đặt bên trong phần tử vùng chứa mẹ. các phần tử nội tuyến và các phần tử nội tuyến này được căn giữa theo chiều dọc dựa trên phần tử giả nhưng mà chúng tôi tạo.

    .ghost-center {vị trí: tương đối; } .ghost-center :: before {content: “”; display: inline-block; chiều cao: 100%; chiều rộng: 1%; vertical-align: giữa; } .ghost-center p {display: inline-block; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/ofwgD

    2. Với một phần tử khối.

    2.1 Chiều cao đã biết – chiều cao

    Nếu bạn biết chiều cao của phần tử, bạn có thể căn giữa nó theo chiều dọc bằng cách làm như sau:

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chiều cao: 100px; margin-top: -50px; / * tính tới padding và border nếu ko sử dụng box-sizing: border-box; * /}

    ví dụ: hoigi.info/chriscoyier/pen/HiydJ

    2.2 Chiều cao ko xác định – chiều cao ko xác định

    Vẫn có thể căn giữa các phần tử có chiều cao chưa biết bằng cách tăng phần trên lên một nửa chiều cao thuở đầu và sau đó dịch chuyển nó một nửa theo chiều dọc.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; chuyển đổi: translateY (-50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lpema

    2.3 Định tâm sẽ tác động tới chiều cao – chiều cao

    Nếu bạn ko quan tâm rằng chiều cao có thể được kéo dài và mục tiêu chính vẫn là căn giữa, thì hãy sử dụng bảng hoặc hiển thị CSS để biến phần tử thành bảng để thực hiện thủ thuật này.

    chính {vị trí: tương đối; hiển thị: bảng; } main div {display: table-cell; vertical-align: giữa; }

    ví dụ: hoigi.info/chriscoyier/pen/RmeWvQ

    3. Sử dụng flexbox

    Tham khảo: Cách chiếu màn hình điện thoại lên máy tính

    Ko có gì ngạc nhiên lúc sử dụng flexbox có vẻ là cách dễ nhất trong số các cách được nêu ở trên.

    .parent {display: flex; flex-hướng: cột; justify-content: trung tâm; }

    ví dụ: hoigi.info/chriscoyier/pen/FqDyi

    Theo cả chiều ngang và chiều dọc:

    Bạn có thể liên kết các kỹ thuật căn giữa ở trên để thực hiện cả căn giữa theo chiều ngang và dọc, nhưng bạn cũng có thể sử dụng các phương pháp sau:

    1. Chiều rộng và chiều cao cố định. yếu tố

    Sử dụng lề âm bằng một nửa chiều cao và chiều rộng, sau đó đặt vị trí thành tuyệt đối và đặt trên cùng và bên trái thành 50% sẽ căn giữa tuyệt vời trong nhiều trình duyệt.

    .parent {vị trí: tương đối; } .child {width: 300px; chiều cao: 100px; đệm: 20px; vị trí: tuyệt đối; top: 50%; trái: 50%; lề: -70px 0 0 -170px; }

    ví dụ: hoigi.info/chriscoyier/pen/JGofm

    2. Phần tử ko biết chiều rộng và chiều cao

    Nếu bạn ko biết chiều cao hoặc chiều rộng, bạn có thể sử dụng tính chất chuyển đổi và sau đó dịch 50% của cả chiều cao và chiều rộng sang căn giữa cả hai bên.

    .parent {vị trí: tương đối; } .child {vị trí: tuyệt đối; top: 50%; trái: 50%; chuyển đổi: dịch (-50%, -50%); }

    ví dụ: hoigi.info/chriscoyier/pen/lgFiq

    3. Sử dụng flexbox

    Ko gì dễ dàng hơn việc sử dụng flexbox để căn giữa.

    .parent {display: flex; justify-content: trung tâm; align-các mục: trung tâm; }

    4. Sử dụng lưới

    Đây là một mẹo nhỏ hoạt động khá tốt với một phần tử.

    body, html {height: 100%; hiển thị: lưới; } span {/ * điều vào giữa * / margin: auto; }

    ví dụ: hoigi.info/chriscoyier/pen/NvwpyK

    Kết luận

    Giờ đây, bạn có thể căn chỉnh mọi thứ bạn muốn trong CSS một cách đơn giản nhất có thể.

    Xem thêm: Quà tặng sinh nhật cho người yêu

    Tham khảo

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_3_plain]

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_1_plain]

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_2_plain]

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_2_plain]

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_3_plain]

#Căn #Giữa #Phần #Tử #Trong #Css

[rule_1_plain]

Nguồn: besttaichinh.com

#Căn #Giữa #Phần #Tử #Trong #Css

Xem thêm thông tin hay:  Thảo Mai Là Gì? | Hỏi Gì?
Best Tài Chính
Best Tài Chínhhttp://besttaichinh.com
Là người sáng lập Website BestTaiChinh.Com - Với nhiều năm kinh nghiệm trong lĩnh vực tài chính ngân hàng, Bitcoin, chứng khoáng ... sẽ sử dụng các kiến thức được tổng hợp và đúc kết để cung cấp đến các bạn những thông tin chính xác, tư vấn hỗ trợ xử lý các dịch vụ tài chính, ngân hàng, bảo hiểm, đầu tư hiệu quả nhất!

Similar Articles

Comments

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

Advertisment

Phổ biến nhất