Nếu bạn muốn căn giữa thứ gì đó theo chiều ngang trong CSS, bạn có thể thực hiện điều đó bằng cách sử dụng text-align: center; (khi làm việc với các phần tử nội dòng) hoặc margin: 0 auto; (khi làm việc với phần tử khối). Nhưng…

Bạn đang xem: chuyển đổi vị trí tuyệt đối dịch

Trong bài viết này, chúng tôi sẽ kiểm tra một số kỹ thuật để căn giữa hoàn toàn một phần tử. Bạn có thể tìm thấy mã hoàn chỉnh trên codepen.io/jscodelover

Nếu bạn muốn căn giữa thứ gì đó theo chiều ngang trong CSS, bạn có thể thực hiện bằng cách sử dụng text-align: center; (khi làm việc với các phần tử nội dòng) hoặc margin: 0 auto; (khi làm việc với phần tử khối). Nhưng khi căn giữa một thứ theo cả chiều ngang và chiều dọc, công việc có thể hơi khó để đạt được.

Sử dụng thuộc tính Vị trí và Chuyển đổi

 

. parent {
position: relative;
}
.child {
position: tuyệt đối;
top: 50% ;
trái: 50%;
biến đổi: dịch (-50%, -50%);
}

Các thuộc tính này được đặt trên phần tử con. Vị trí tuyệt đối căn cứ vào vị trí của phần tử so với phần tử mẹ gần nhất có position: relative . Nếu nó không thể tìm thấy, nó sẽ liên quan đến tài liệu. Thêm top: 50%; left: 50%; vì vị trí được tính từ góc trên cùng bên trái.

được tạo bằng draw.io

Bạn phải kéo lại mục bằng một nửa chiều rộng và chiều cao của nó. Bạn có thể đạt được điều này với biến đổi: translate (-50%, -50%);

Sử dụng Viewport Unit

 

. con {
margin: 50vh tự động 0;
biến đổi: translateY (-50%); < br />}

Chúng tôi sử dụng margin-left / margin-right: auto; để căn giữa theo chiều ngang và sử dụng giá trị vh cho căn giữa theo chiều dọc. Tất nhiên, bạn phải kéo lại mục như trong ví dụ tuyệt đối (nhưng chỉ dịch chiều cao). Lưu ý: – Phương pháp này chỉ hoạt động nếu bạn đang định vị đến khung nhìn chính.

Xem Thêm  Lập trình hướng đối tượng trong Java - Hướng dẫn cho người mới bắt đầu - lập trình hướng đối tượng java

Sử dụng Flexbox

 

. parent {
display: flex;
justify-content: center;
align-items: center;
}

Đặt giá trị gốc (hoặc vùng chứa ) thành display: flex; , nó cho trình duyệt biết rằng chúng tôi định con cái sử dụng flexbox cho bố cục của chúng. Justify-content xác định cách đặt nội dung của bạn trong hàng hoặc cột của bạn. Align-content tương tự như justify-content , nhưng kiểm soát vị trí của các mục trên trục chéo.

Thay vì sử dụng justify-content và align-items, chúng ta có thể sử dụng margin: auto; ở con.

 

. parent {
display: flex;
min-height: 100vh;
}
.child {
margin: auto;
}

Sử dụng CSS Grid

 

. parent {
display: grid;
grid-template-rows: 100vh;
grid-template- cột: 100vw;
}
.child {
justify-self: center;
align-self: center;
}

Trên tập cha display: grid; và chỉ định chiều rộng hàng / cột. Đối với đứa trẻ, thiết lập biện minh-tự-mình và tự-căn-cứ làm trung tâm. Thuộc tính justify-self và align-self đặt cách một hộp được căn chỉnh bên trong vùng chứa căn chỉnh của nó (chính) dọc theo trục thích hợp.

Theo dõi tôi trên Twitter , LinkedIn hoặc GitHub .

Tôi hy vọng bài viết này hữu ích với bạn. Cảm ơn vì đã đọc & amp; Tiếp tục mã hóa !!


Xem thêm những thông tin liên quan đến chủ đề dịch chuyển đổi vị trí tuyệt đối

(ĐTCL) MẸO XẾP ĐỘI HÌNH SIÊU NHANH: ĐỔI BÊN CHỈ TRONG 0.5 GIÂY – DỊCH CHUYỂN TỨC THỜI! | iLoda

  • Tác giả: iLoda
  • Ngày đăng: 2021-04-06
  • Đánh giá: 4 ⭐ ( 4678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ➥ Đăng ký kênh để xem thêm Video mỗi ngày: https://bom.to/2ylFGlf

    ➥ Lịch Live:
    – 21h21 – 23h hàng ngày trên youtube
    – 23h – 03h hàng ngày trên: https://www.nimo.tv/iloda

    ➥ Liên hệ quảng cáo: luuhailong96@gmail.com

    ➥ Tham gia giao lưu với tớ tại:
    – Nhóm FB: https://www.facebook.com/groups/iLodaFanClub/
    – Discord: https://discord.gg/sYtYPwg

    ➥ Fanpage FB: https://www.facebook.com/iLodaLOL
    Theo dõi tớ tại FB cá nhân: http://facebook.com/luuhailong10

    iLoda lol lmht lienminh lienminhhuyenthoai dautruongchanly đtcl thachdaulienminh

    iLoda, lol, thách đấu liên minh, đấu trường chân lý, league of legends, dau truong chan ly, DTCL, TFT, teamfighttactics, lien minh huyen thoai, liên minh huyền thoại,

    ———————————————-/————-
    © Bản quyền thuộc về iLoda
    © Copyright by iLoda ☞ Do not Reup

position : xác định vị trí tương đối và tuyệt đối cho thành phần

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 1357 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: position : xác định vị trí tương đối và tuyệt đối cho thành phần, Học web chuẩn, học miễn phí thiết kế web bằng html, css, xhtml, css3, html5, jquery, javascript, wordpress, php qua ví dụ mẫu, chuyên đề, cấu trúc, bài học, tham khảo.

Tham chiếu ô tuyệt đối và tương đối trong excel

  • Tác giả: ketoanminhviet.com
  • Đánh giá: 5 ⭐ ( 7088 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham chiếu ô tuyệt đối và tương đối trong excel Sự khác biệt giữa hai loại tham chiếu này là chúng có hành vi khác nhau khi bạn kéo hoặc sao chép và dán chúng vào các ô khác. Các tham chiếu tương đối thay đổi và thích ứng khi bạn sao chép và dán chúng; tài liệu tham khảo tuyệt đối, mặt khác, không.

Tiêu chuẩn TCVN 9399:2012 Xác định chuyển dịch ngang bằng trắc địa nhà và công trình xây dựng

  • Tác giả: luatvietnam.vn
  • Đánh giá: 5 ⭐ ( 9277 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiêu chuẩn Quốc gia TCVN 9399:2012 quy định các yêu cầu kỹ thuật, các phương pháp, quy trình quan trắc và xử lý số liệu chuyển dịch ngang nhà và công trình xây dựng chịu áp lực ngang hoặc các công trình xây dựng trên nền đất có nguy cơ bị chuyển dịch hoặc bị trượt.

Chuyển đổi giữa các tham chiếu tương đối, tuyệt đối và hỗn hợp

  • Tác giả: prod.support.services.microsoft.com
  • Đánh giá: 5 ⭐ ( 6441 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dùng các tham chiếu tương đối hoặc tuyệt đối trong các công thức, hoặc trộn lẫn cả hai.

Cách sử dụng hàm giá trị tuyệt đối trong Excel

  • Tác giả: danhmayvanphong.com
  • Đánh giá: 5 ⭐ ( 4146 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chuyển đổi địa chỉ tương đối sang tuyệt đối Không gian địa chỉ và không gian vật

  • Tác giả: toc.123docz.net
  • Đánh giá: 4 ⭐ ( 7644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Tại 123doc thư viện tài liệu trực tuyến Việt Nam

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để xây dựng trang web từ Scratch bằng HTML & CSS? - làm thế nào để xây dựng một trang web từ đầu html css

By ads_php