Tại sao không đặt lề: tự động căn giữa hình ảnh?

93

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

Mở divrộng đến 100% nếu nó phải nhưng hình ảnh không chính giữa. Tại sao?

html css

— Joe Phillips
nguồn

197

Bởi vì hình ảnh của bạn là một phần tử khối nội tuyến . Bạn có thể thay đổi nó thành một phần tử cấp khối như sau:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

và nó sẽ được căn giữa.

— Keltex
nguồn

10

Bạn cần phải kết xuất nó dưới dạng cấp khối;

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
nguồn

Tại sao nó chỉ căn chỉnh theo chiều ngang mà không phải theo chiều dọc?

— Mr Bell

4

Căn chỉnh dọc không thẳng về phía trước như bạn có thể mong đợi. Đó là tất cả xuống để spec CSS - kiểm tra bài viết đẹp súc tích này về vấn đề này - phrogz.net/css/vertical-align/index.html

— TheDeadMedic

8

Thêm vào style="text-align:center;"

thử mã bên dưới

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

— Pranay Rana
nguồn

Tôi không nghĩ câu trả lời của bạn không chính xác nhưng của bạn vẫn thiếu bất kỳ lời giải thích nào về kiểu hiển thị.

— Joe Phillips

Mặc dù câu trả lời của bạn có thể được coi là một giải pháp thay thế, tôi sẽ không khuyên nó. Lý do là thực tế là nếu bạn thêm bất kỳ thứ gì khác bên trong div, chẳng hạn, một tiêu đề, nó sẽ căn giữa với hình ảnh. Để căn chỉnh tiêu đề sang trái, bạn sẽ phải viết nhiều kiểu cho nó. Bạn sẽ phải tiếp tục làm điều này cho bất cứ điều gì bạn thêm vào div. Vì vậy, việc thêm display: block;vào hình ảnh rất được khuyến khích.

— Devner

2

Tôi biết đây là một bài viết cũ, nhưng muốn chia sẻ cách tôi đã giải quyết vấn đề tương tự.

Hình ảnh của tôi đang kế thừa một float: left từ một lớp cha. Bằng cách đặt float: none, tôi có thể làm cho margin: 0 tự động và display: block hoạt động bình thường. Hy vọng nó có thể giúp một ai đó trong tương lai.

— Ryan Hollingsworth
nguồn

1

Tôi thấy rằng tôi phải xác định chiều rộng cụ thể cho đối tượng hoặc không có gì khác sẽ làm cho nó ở giữa. Chiều rộng tương đối không hoạt động.

— Catwoman
nguồn

2

Điều này không cung cấp câu trả lời cho câu hỏi. Để phê bình hoặc yêu cầu làm rõ từ tác giả, hãy để lại nhận xét bên dưới bài đăng của họ - bạn luôn có thể nhận xét về bài đăng của chính mình và khi bạn có đủ uy tín, bạn sẽ có thể nhận xét về bất kỳ bài đăng nào .

— Kristijan Iliev

Quan điểm của tôi là, trong khi một số người đã đưa ra câu trả lời hiệu quả, chúng chỉ hoạt động nếu mã bao gồm một định nghĩa cụ thể về chiều rộng của đối tượng. Ví dụ: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> sẽ hoạt động, nhưng không sử dụng kích thước tương đối, như "width : 50% ”. Tất nhiên, nếu bạn sử dụng "width: 100%" thì căn giữa không phải là vấn đề, vì khi đó không có lề ở bên trái hoặc bên phải của đối tượng.

— Catwoman

0

mở divrồi đặt

style="width:100% ; margin:0px auto;"

image thẻ (hoặc) nội dung

đóng div

— Hamd Islam
nguồn

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
nguồn

0

Tôi đã tìm thấy ... margin: 0 auto; làm việc cho tôi. Nhưng tôi cũng đã thấy nó KHÔNG hoạt động do lớp bị át bởi một đặc điểm cụ thể khác có ... float: left; vì vậy hãy để ý rằng bạn có thể cần thêm ... float: none; điều này đã hoạt động trong trường hợp của tôi khi tôi mã hóa một truy vấn phương tiện.

— Dino
nguồn