Sử dụng margin:auto
để căn giữa phần tử khối theo chiều ngang là một kỹ thuật nổi tiếng. Nhưng bạn đã bao giờ tự hỏi tại sao hoặc làm thế nào nó hoạt động? . ô tô hoạt động. Ngoài ra, trong hỗn hợp là những gì auto
có thể làm ở lề, nếu nó hoạt động để định tâm theo chiều dọc và một số vấn đề khác
Nhưng trước tiên, auto
thực sự làm gì?
Định nghĩa của auto
thay đổi theo các phần tử, loại phần tử và ngữ cảnh. Ở lề, auto
có thể có nghĩa là một trong hai điều. chiếm không gian có sẵn hoặc 0 px. Hai cái này sẽ xác định các bố cục khác nhau cho một phần tử
Đọc thêm. 6 thủ thuật CSS để căn chỉnh nội dung theo chiều dọc
"tự động" chiếm dung lượng có sẵn
Đây là cách sử dụng ký quỹ phổ biến nhất mà chúng ta thường gặp. Bằng cách gán auto
cho lề trái và phải của một phần tử, chúng chiếm không gian ngang có sẵn trong vùng chứa của phần tử như nhau – và do đó phần tử được căn giữa
Xem lề Bút. tự động bởi Preethi [@rpsthecoder] trên CodePen
Tuy nhiên, điều này sẽ chỉ hoạt động đối với các lề ngang [sẽ nói thêm về lý do sau], và nó cũng không hoạt động với các phần tử nổi và nội tuyến và bản thân nó cũng không thể hoạt động với các phần tử có vị trí tuyệt đối và cố định [tuy nhiên chúng ta sẽ xem cách thực hiện
Giả nổi bằng cách chiếm không gian có sẵn
Vì auto
ở cả lề phải và trái đều chiếm khoảng trống "có sẵn" như nhau, bạn nghĩ điều gì sẽ xảy ra khi giá trị auto
chỉ được trao cho một trong số đó?
Lề trái hoặc phải với auto
sẽ chiếm toàn bộ khoảng trống "có sẵn" làm cho phần tử trông giống như nó đã bị xóa sang phải hoặc trái
Xem lề Bút. auto faux float bởi Preethi [@rpsthecoder] trên CodePen
“auto” Được tính thành 0px
Như đã đề cập trước đây, auto
sẽ không hoạt động trong các phần tử float, inline và absolute. Tất cả các yếu tố này đã quyết định bố cục của chúng, vì vậy sẽ không có ích gì khi sử dụng auto
cho các lề và mong đợi nó sẽ được căn giữa như thế
Điều đó sẽ đánh bại mục đích ban đầu của việc sử dụng thứ gì đó như auto
2. Do đó, auto
sẽ có giá trị 0px trong các phần tử đó
auto
cũng sẽ không hoạt động trên phần tử khối điển hình nếu nó không có chiều rộng. Tất cả các ví dụ tôi đã chỉ cho bạn cho đến nay đều có chiều rộng
Chiều rộng của giá trị auto
sẽ có lề auto
6. Chiều rộng của phần tử khối thường bao phủ vùng chứa của nó khi nó là auto
hoặc auto
8 và do đó, lề auto
sẽ được tính thành auto
6 trong trường hợp như vậy
Điều gì xảy ra với lề dọc với giá trị auto
?
auto
ở cả lề trên và lề dưới luôn được tính là 0px [ngoại trừ các phần tử tuyệt đối]. nói nó như thế này
“Nếu “margin-top” hoặc “margin-bottom” là “auto”, giá trị được sử dụng của chúng là 0″
Tại sao, đó là cho đến nay, một bí ẩn. Có thể là do luồng trang dọc điển hình, trong đó kích thước trang tăng theo chiều cao. Vì vậy, căn giữa một phần tử theo chiều dọc trong vùng chứa của nó sẽ không làm cho nó xuất hiện ở giữa, so với chính trang đó, không giống như khi nó được thực hiện theo chiều ngang [trong hầu hết các trường hợp]
Và có lẽ chính vì lý do này, họ đã quyết định thêm một ngoại lệ cho các phần tử tuyệt đối có thể được căn giữa theo chiều dọc dọc theo toàn bộ chiều cao của trang
Cũng có thể là do hiệu ứng thu gọn lề [sự sụp đổ của các phần tử liền kề” lề], đây là một ngoại lệ khác đối với các lề dọc
Tuy nhiên, trường hợp thứ hai dường như không xảy ra – vì các phần tử không thu gọn lề của chúng – như Floats và các phần tử có auto
3 khác với auto
4, vẫn chỉ định lề dọc 0px cho auto
Định tâm các yếu tố được định vị tuyệt đối
Vì có một ngoại lệ đối với các phần tử được định vị tuyệt đối, nên chúng tôi sẽ sử dụng giá trị auto
để căn giữa một phần tử theo chiều dọc và chiều ngang. Nhưng trước đó, chúng ta cần tìm hiểu xem khi nào thì margin:auto
sẽ thực sự hoạt động như chúng ta muốn trong một phần tử được định vị tuyệt đối
Đây là nơi khác đến
"Nếu cả ba "trái", "chiều rộng" và "phải" là "tự động". Trước tiên, đặt bất kỳ giá trị “tự động” nào cho “lề trái” và “lề phải” thành 0… "
"Nếu không có cái nào trong số ba là "tự động". Nếu cả “lề-trái” và “lề-phải” đều là “tự động”, hãy giải phương trình với ràng buộc bổ sung là hai lề có giá trị bằng nhau"
Điều đó nói lên khá nhiều rằng đối với các lề ngang của auto
để chiếm các khoảng bằng nhau, các giá trị cho auto
9, auto
0 và auto
1 không nên là auto
, giá trị mặc định của chúng. Vì vậy, tất cả những gì chúng ta phải làm là cung cấp cho chúng một số giá trị trong một phần tử được định vị tuyệt đối. auto
9 và auto
1 phải có các giá trị bằng nhau để định tâm hoàn hảo
Thông số kỹ thuật tương tự cho lề dọc
“Nếu cả ba “top”, “height” và “bottom” đều tự động, hãy đặt “top” thành vị trí tĩnh…”
“Nếu không có cái nào trong số ba là “tự động”. Nếu cả “margin-top” và “margin-bottom” đều là “auto”, hãy giải phương trình với ràng buộc bổ sung là hai lề có giá trị bằng nhau…”
Do đó, để một phần tử tuyệt đối được căn giữa theo chiều dọc, các giá trị auto
5, auto
6 và auto
7 của nó không nên là auto
Bây giờ bằng cách kết hợp tất cả những thứ này, đây là những gì chúng ta sẽ nhận được
Xem lề Bút. tự động tuyệt đối bởi Preethi [@rpsthecoder] trên CodePen
Phần kết luận
Nếu bạn muốn xóa một phần tử trên trang của mình sang phải hoặc trái mà không có các phần tử sau bao quanh nó [như điều xảy ra với float], hãy nhớ rằng có tùy chọn sử dụng auto
cho lề
Chuyển đổi một phần tử thành tuyệt đối chỉ để nó có thể được căn giữa theo chiều dọc có thể không phải là một ý tưởng hay. Có các tùy chọn khác như flexbox và CSS transform phù hợp hơn với những