Lề tự động không căn giữa hình ảnh trong trang

97

Trong ví dụ này , hình ảnh không được căn giữa. Tại sao? Trình duyệt của tôi là Google Chrome v10 trên windows 7, không phải IE.

<img src="/img/logo.png" style="margin:0px auto;"/>

— Nhà thiết kế web
nguồn

Kiểm tra một lớp kiểu, tôi thấy rằng nó không hoạt động margin: 0 auto; sau một số thử nghiệm phát hiện ra rằng nếu tên lớp bạn đang thêm vào một phần tử có cùng tên với một phần tử thì điều này sẽ không hoạt động.

— LostLight

218

thêm display:block;và nó sẽ hoạt động. Hình ảnh được in thẳng hàng theo mặc định

Để làm rõ, chiều rộng mặc định cho một blockphần tử auto, tất nhiên sẽ lấp đầy toàn bộ chiều rộng có sẵn của phần tử chứa.

Bằng cách đặt lề thành auto, trình duyệt chỉ định một nửa không gian còn lại cho margin-leftvà nửa còn lại cho margin-right.

— Ross
nguồn

12

+1 Vì đã đúng. Sẽ tạo ra một câu trả lời tuyệt vời nếu bạn giải thích chi tiết những gì cần thiết margin:autođể căn giữa một mục trong luồng. ( display:blockhoặc display:table, position:statichoặc position:relative, v.v.)

— Phrogz

1

@Phrogz đã đồng ý; thêm một số giải thích.

— Ross

15

Những người đang đọc phần này cũng có thể thấy hữu ích khi thêm "float" không có vì có bất kỳ loại float nào khác sẽ phá vỡ tự động ký quỹ của bạn.

— Code Whisperer

Nhưng nó vẫn không được căn giữa. Nó chỉ căn giữa theo chiều ngang. Tôi muốn căn giữa theo chiều dọc, nhưng ngay cả nếu tôi thay đổi 0px autođể chỉ autonó vẫn không làm việc.

— Aaron Franke

14

Trong một số trường hợp (như phiên bản trước của IE, Gecko, Webkit), thừa kế, các yếu tố với position:relative;sẽ ngăn chặn margin:0 auto;từ làm việc, ngay cả khi top, right, bottom, và leftkhông được thiết lập.

Đặt phần tử thành position:static;(mặc định) có thể khắc phục sự cố trong những trường hợp này. Nói chung, các phần tử mức khối có chiều rộng được chỉ định sẽ tuân theo margin:0 auto;việc sử dụng relativehoặc staticđịnh vị.

— Brendan
nguồn

1

margin: 0 autochỉ hoạt động tốt trên các yếu tố tương đối vị trí miễn là họ là những yếu tố khối không có phao và chiều rộng quy định ...

— buồn chán

Tôi cho rằng đó là sự mỉa mai. Nếu bạn chỉnh sửa câu trả lời của mình để nó không chính xác, tôi sẽ xóa phiếu phản đối. Tôi đã viết CSS gần 15 năm và không bao giờ nhớ được lề tự động không hoạt động để căn giữa các phần tử có chiều rộng cố định được định vị tương đối theo chiều ngang - mặc dù các thuộc tính khác thích floatvà displaycó thể thay đổi hành vi đó.

— Ennui

14

Bạn có thể căn giữa chiều rộng tự động div bằng cách sử dụng display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

— giống nhau
nguồn

1

Điều này hoạt động, và tôi không biết tại sao. Bạn có thể giải thích?

— ThatsJustCheesy

1

Tôi chưa bao giờ sử dụng nó trước đây nhưng nó phù hợp với tôi bây giờ.

— zkytony

10

Trong trường hợp của tôi, vấn đề là tôi đã đặt chiều rộng tối thiểu và tối đa mà không có chiều rộng .

— Daniel Sitarz
nguồn

3

tóm lại là: yếu tố phải position:static, có một cố định width:thiết lập và trở thành một display:blockyếu tố

— Joey T

Đó là vấn đề rộng đối với tôi quá - bootstrap tự động thiết lập div tôi để sử dụng 100% có sẵn

— Edmund Sulzanok

6

Bất cứ khi nào chúng tôi không thêm chiều rộng và thêm margin:auto, tôi đoán nó sẽ không hoạt động. Đó là kinh nghiệm của tôi. Chiều rộng cung cấp ý tưởng nơi chính xác mà nó cần cung cấp biên bằng nhau.

— quần tejaswini
nguồn

2

có một giải pháp thay thế cho margin-left:auto; margin-right: auto;hoặc margin:0 auto;cho những cái sử dụng position:absolute;cách này:
bạn đặt vị trí bên trái của phần tử thành 50% ( left:50%;) nhưng điều đó sẽ không căn giữa nó một cách chính xác để phần tử được căn giữa chính xác, bạn cần đặt nó lề của trừ một nửa chiều rộng của nó, điều đó sẽ căn giữa phần tử của bạn một cách hoàn hảo

đây là một ví dụ: http://jsfiddle.net/35ERq/3/

— Andrei
nguồn

0

Đối với một nút bootstrap:

display: table; 
margin: 0 auto;

— Abram
nguồn

0

đặt cái này trong css của cơ thể: background: # 3D668F; sau đó thêm: display: block; margin: tự động; vào css của img.

— Gail
nguồn