Làm cách nào để dán hình ảnh vào cuối màn hình hiển thị và được căn giữa?

Question

Tôi có một trang web và tôi cần phải có hình ảnh ở giữa trang hiển thị. Vì vậy, ở bất kỳ kích thước màn hình nào, hình ảnh sẽ vẫn ở dưới cùng và được căn giữa.

Answer 1

sử dụng css tinh khiết bạn có thể đạt được điều này trong tất cả các trình duyệt mới

.fix{ 
    position:fixed; 
    bottom:0px; 
    left:50%; 
    } 
<img src="yourimagepath" class="fix"/> 

và cho IE6 bạn có thể sử dụng position:absolute; thay vì cố định. nó sẽ định vị hình ảnh ở dưới cùng của trang nhưng khi bạn di chuyển lên hình ảnh sẽ cuộn với trang. may position: fixed trong không được hỗ trợ trong IE6

Answer 2

Bạn nên đặt nó vào một div và sau đó, tưởng tượng hình ảnh của bạn là 500px rộng:

div.className{ 
position:absolute; 
margin-left: -250px; /* very important for the image to be centered */ 
left:50%; 
bottom:0px; 
} 

Answer 3

Cũ câu hỏi nhưng đây là giải pháp tốt nhất mà tôi đã đưa ra. Đặt hình ảnh trong một div container, div được đặt ở dưới cùng của màn hình và hình ảnh là trung tâm bên trong của nó. Div có chiều rộng được đặt là 100% để hình ảnh có thể chính xác. Đối với margin:auto; để làm việc theo hình ảnh phải được hiển thị như một yếu tố bảng với display:table;

Sử dụng display:table; có nghĩa là bạn không cần phải thiết lập chiều rộng cố định vào yếu tố mà bạn muốn làm trung tâm.

<style> 
    .sticky-image-wrapper{ 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
    } 

    .sticky-image-wrapper img{ 
     display: table; 
     position: relative; 
     margin: auto; 
    } 
    </style> 

    <div class="sticky-image-wrapper"> 
     <img src="myimage.jpg" /> 
    </di>