thể trùng lặp:
How to center div horizontally and verticallycách đặt hình ảnh vào giữa trang html?
tôi cần phải đưa hình ảnh ở trung tâm của trang html, cả hai chiều dọc và ngang ... đã cố gắng vài thứ nhưng dường như làm việc tốt. Để có được căn chỉnh ngang tôi đã sử dụng <body style="text-align:center">
và nó hoạt động tốt, nhưng điều gì với căn chỉnh theo chiều dọc?
liên quan
Nếu:
X là chiều rộng hình ảnh,
Y là chiều cao hình ảnh,
thì:
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
Nhưng hãy nhớ giải pháp này chỉ có hiệu lực nếu yếu tố duy nhất trên trang web của bạn sẽ được hình ảnh này. Tôi cho rằng đó là trường hợp ở đây.
Sử dụng phương pháp này mang lại cho bạn lợi ích của tính lưu động. Nó sẽ không quan trọng như thế nào lớn (hoặc nhỏ) màn hình của một ai đó là. Hình ảnh sẽ luôn ở giữa.
trong đó X mã này ??? – AminM
Nếu bạn không biết kích thước của hình ảnh, thì chỉ cần thay thế các dòng 'lề trái' và 'lề-trên cùng 'bằng cách này:' transform: translate (-50%, -50%); ' –
Hey, bây giờ bạn có thể đưa ra để hình nền cơ thể
và thiết lập background-position:center center;
như như thế này
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
không hoạt động đối với tôi –
Đặt hình ảnh của bạn trong một div container sau đó sử dụng CSS sau (thay đổi kích thước cho phù hợp với hình ảnh của bạn.
.imageContainer{
position: absolute;
width: 100px; /*the image width*/
height: 100px; /*the image height*/
left: 50%;
top: 50%;
margin-left: -50px; /*half the image width*/
margin-top: -50px; /*half the image height*/
}
Có một số tùy chọn khác nhau, dựa trên những gì chính xác hiệu ứng bạn đang đi . là Chris Coyier đã làm một mảnh trên chỉ cách này trở lại khi Worth đọc:.
tôi khá chắc chắn điều này đã được trả lời hơn vài lần ở đây đã – Joonas
http:. // stackoverflow .com/questions/10296015/how-to-c enter-div-horizontal-and-verticalically – Alvaro
Đây là một ví dụ hoạt động trong IE7 (nếu nó quan trọng), không giống như các câu trả lời 'display: table-cell' thông thường, và với một hình ảnh có kích thước không xác định: http://stackoverflow.com/câu hỏi/10998614/ie7-verticalically-align-middle-not-working/10998683 # 10998683 – thirtydot