To achieve perfect alignment for your image, you need to address two aspects. The first is the horizontal alignment, which can be easily achieved by setting the margin to auto on the surrounding div element of the image. Make sure to set the width and height of the div to match the size of the image. For vertical center alignment, some Javascript needs to be added to the HTML code. This is necessary because the page's height may change after it has loaded. To accomplish this, using jQuery and the following script is recommended:
$(window).ready( function() {
repositionCenteredImage();
});
$(window).resize(function() {
repositionCenteredImage();
});
function repositionCenteredImage() {
pageHeight = $(window).height();
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
The HTML structure of the page displaying the image should look like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
The CSS styles applied to the elements are as follows:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer {
margin: auto auto;
width: 300px;
height: 300px;
}
#logoImage {
width: 300px;
height: 300px;
}
You can find the complete solution available for download on our Company homepage at .