Có hai khía cạnh bạn cần phải giải quyết. Khía cạnh đầu tiên là căn chỉnh ngang. Điều này dễ dàng đạt được với lề: tự động áp dụng trên phần tử div xung quanh chính hình ảnh đó. DIV cần phải có chiều rộng và chiều cao được đặt thành kích thước hình ảnh (nếu không điều này sẽ không hoạt động). Để đạt được căn chỉnh theo chiều dọc, bạn cần thêm một số javascript vào HTML. Điều này là do kích thước chiều cao HTML không được biết đến khi khởi động trang và có thể thay đổi sau này. Giải pháp tốt nhất là sử dụng jQuery và viết kịch bản sau: $ (cửa sổ).ready (function() {/ * nghe sự kiện sẵn sàng của cửa sổ - được kích hoạt sau khi trang đang được tải */ repositionCenteredImage(); });
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
trang
HTML được hiển thị hình ảnh trông như thế này:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS gắn liền với các yếu tố như sau:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
Bạn có thể tải toàn bộ giải pháp từ công ty chúng tôi trang chủ tại url sau:
http://brumenlab.com
Nguồn
2015-04-10 13:58:45
Tại sao bạn đang sử dụng 4 thẻ thay vì 2?![]()
sẽ hoạt động. –
Vivien
Tôi thấy hình ảnh ở dưới cùng của div, X rapresent một cái gì đó hoặc tôi đã đặt nó một số giá trị? – CeccoCQ
X có thể là bất cứ điều gì tốt cho bạn: "5%", "10px, 0" ... Bạn cũng có thể đặt hình ảnh dưới cùng với "hình nền" và "vị trí nền" trên div chính – Vivien