Hỏi về thuộc tính căn giữa trong CSS

Mình có đọc được đoạn Code này để căn chỉnh một phần tử ra chính giữa của một bố cục:

Tuy nhiên có chỗ này mình thực sự chưa hiểu:

  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;

Thậm chí đoạn trên ta cũng có thể thay thế bằng đoạn này :

  top:-9999px;
  left:-9999px;
  right:-9999px;
  bottom:-9999px;
  margin:auto;

Mình không hiểu chúng hoạt động thế nào, nhờ mọi người giải thích giúp mình 2 đoạn code trên được không ạ.

CÁm ơn mọi người nhiều !

Có những thuộc tính phải phối hợp với nhau mới có ý nghĩa, nếu nó chỉ đứng riêng lẻ thì khác.

Cho nên, bạn cần phải tìm kiếm và đọc một số bài về nguyên tắc canh chỉnh center cho một đối tượng, ở đó họ giải thích kỹ tại sao lại phải thế nọ mà không thế kia. Ở đây sẽ rất khó giải thích bởi vì CSS có những cái gần như làm mãi thì biết chứ nó không theo một lý thuyết chính thống nào (hay tạm hiểu là có nhiều cách thiết lập CSS để đạt cùng một kết quả hiển thị, tùy người làm). Chính thế, dân lập trình rất ghét CSS bởi nó khiến cho họ không mò ra logic.

Ví dụ: margin: auto; thường áp dụng cho một đối tượng có kích thước nào đó và tùy theo đối tượng bọc bên ngoài nó mà tự động canh lề. Khi thấy có top, left, right, bottom gì đó thì đối tượng đó thường hay có thuộc tính position là absolute.

Túm lại, hãy đọc một vài cuốn sách về CSS như Mastering CSS Principles: A Comprehensive Guide để có được nền, rồi mới đi khám phá, còn không sẽ “dục tốc bất đạt”.

2 Likes

Cám ơn anh nhiều ah, cái này em cũng search trên Google nhưng chưa tìm được trang nào giải thích cặn kẽ về vấn đề này.

Mong nhận được thêm ý kiến đóng góp của các thành viên khác trên DNH :))

Có bạn nào rành hơn về cái này không, xin chỉ giáo mình với

Đọc nguyên cái tài liệu: HTML5 and CSS3 for dummies bạn nhé. Cái này dạy cặn kẽ cơ bản css từng li từng tí một luôn bạn à

1 Like

Đầu tiên người ta dùng, để có thể lấy được hết khoản trống:

  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;

Sau đó set width và height cho nó là

width: 100px;
height: 100px;

Thì các khoản trống có thể nhận được còn lại sẽ trở thành margin, sau đó tiếp tục dùng margin auto để canh đều 2 bên, vậy thôi : )

margin: auto
1 Like

Bạn cho mình hỏi, câu này nghĩa là thế nào ạ :

Lấy được hết khoảng trống là như thế nào ạ ?

Tức là nó sẽ lấy được hết khoản trống từ thằng parent

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?