Chỉ cần một câu hỏi nhanh chóng được bugging tâm trí tôi: Tại sao trung vớiTại sao định tâm với lề 0 tự động hoạt động với màn hình: chặn nhưng không hoạt động với màn hình: inline-block?
margin:0 auto
không làm việc tốt với
display:block
nhưng không tập trung một div khi màn hình được thiết lập để
display:inline-block
Cảm ơn bạn đã trả lời
Sự hiểu biết của tôi là như sau (bạn gh Tôi vui mừng được sửa chữa).
Tôi hiểu tham chiếu đến các khối ký tự văn bản. Chiều rộng của chúng mở rộng với nội dung, chắc chắn. Tuy nhiên, tôi không hiểu ý của bạn là gì bởi 'Các phần tử khối nội tuyến có một bên ngoài hoạt động nội tuyến, nhưng bên trong hoạt động như một khối.' ? 'Bên ngoài' hoặc 'bên trong' là gì trong trường hợp này? –
Hãy tưởng tượng một phần tử nội tuyến có phần tử khối bên trong nó. Bởi bên ngoài, tôi có nghĩa là yếu tố nội tuyến. Bất kỳ css nào bạn áp dụng sẽ được thêm vào phần tử khối. Nội tuyến khối là loại hai yếu tố hoạt động như một. –
Thông số Rob cung cấp có thể rõ ràng hơn :) –
inline-block yếu tố không tôn trọng lề phải hoặc lề trái, không thể áp dụng cài đặt auto.
block các yếu tố tôn trọng tất cả các lề.
Họ tôn trọng lề. Họ chỉ không thể tính toán tự động. –
Ahh, sai lầm của tôi. –
Bạn cần tìm hiểu về inline boxes (không chặn) để xem điều gì đang xảy ra. Một hộp nội tuyến chứa các mục nội tuyến như văn bản và hình ảnh. Một khối nội tuyến duy trì vị trí của nó trong hộp nội tuyến nhưng hoạt động như một phần tử khối bên trong vị trí của nó bên trong hộp. Cũng giống như một từ trong văn bản không thể có chiều rộng của nó, không phải là một khối nội tuyến.
Cảm ơn bạn đã cố gắng giải thích cho tôi điều này. Tôi sẽ lấy một cái móc ở đó. –
Xem http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins
Blocks:
10.3.3 Khối cấp, các yếu tố phi thay thế trong dòng chảy bình thường
Các trở ngại sau đây phải giữ một trong những giá trị sử dụng của các thuộc tính khác :
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = chiều rộng chứa chặn
Nếu 'chiều rộng' không phải là 'tự động' và 'chiều rộng trái-phải' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (cộng với bất kỳ của 'lề trái' hoặc 'lề phải' không phải là 'tự động') lớn hơn chiều rộng của khối chứa, sau đó bất kỳ giá trị 'tự động' nào cho 'lề trái' hoặc 'lề phải' , đối với các quy tắc sau, được xử lý là không.
Nếu tất cả những điều trên có giá trị tính toán khác hơn là 'tự động', các giá trị được cho là "quá hạn chế" và một trong những giá trị sử dụng sẽ phải thể khác với giá trị được tính. Nếu thuộc tính 'hướng' của khối chứa có giá trị 'ltr', giá trị được chỉ định của 'lề phải' bị bỏ qua và giá trị được tính như vậy là để làm cho sự bình đẳng là đúng. Nếu giá trị của 'hướng' là 'rtl', thì thay vào đó, này sẽ xảy ra với 'lề trái'.
Nếu có chính xác một giá trị được chỉ định là 'tự động', giá trị được sử dụng của nó là sau từ sự bình đẳng.
Nếu 'chiều rộng' được đặt thành 'tự động', bất kỳ giá trị 'tự động' nào khác trở thành '0' và 'chiều rộng' sau từ kết quả bình đẳng.
Nếu cả hai 'lề trái' và 'lề phải' là 'tự động', giá trị được sử dụng bằng nhau. Điều này theo chiều ngang trung tâm phần tử đối với các cạnh của khối chứa.
Inline-khối:
10.3.9 'inline-block', các yếu tố phi thay thế trong dòng chảy bình thường
Nếu 'width' là 'tự động', giá trị sử dụng là chiều rộng thu nhỏ đến vừa với các phần tử nổi .
Giá trị được tính là 'tự động' cho 'lề trái' hoặc 'lề phải' trở thành giá trị được sử dụng là '0'.
Tôi nhận ra rằng tôi là một người trễ trả lời bit này, nhưng bạn có thể khắc phục vấn đề này nếu bạn muốn kết hợp auto lề với inline-block bằng cách xác định văn bản gắn kết trong cơ thể như trong ...
body {
text-align: center;
}
Phần tử khối nội tuyến hoạt động giống như một từ văn bản. Nó nằm nội tuyến với các mục nội tuyến khác. Nếu bạn muốn chúng tập trung, bạn phải đặt * container * thành 'text-align: center;' –
@ ralph.m tại sao không trả lời? -_- – knitevision
Thú vị. Tôi đối xử với nó như một sắc thái, gây ra khi tôi đang thử nghiệm các div với tham số hiển thị khác nhau và một đường viền để giúp tôi hình dung mọi thứ, hiển thị: khối hành động như khối nội tuyến (không lấy toàn bộ chiều rộng của vùng chứa của nó. Lạ ...) . Tuy nhiên, như tôi đã nói trước đây, chỉ với màn hình hiển thị: khối nó có thể trung tâm với lề: 0 tự động. –