I am working on a website and struggling to center the image on all screen sizes.
I attempted the following code:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
window.onload = function () {
var rotator = document.getElementById("rotator");
var images = rotator.getElementsByTagName("img");
for (var i = 1; i < images.length; i++) {
images[i].style.display = "none";
}
var counter = 1;
setInterval(function () {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[counter].style.display = "block";
counter++;
if (counter == images.length) {
counter = 0;
}
}, 1000);
};
</script>
<style>
.pg{
top: 50%;
left: 50%;
position: absolute;
}
img
{
display:block;
margin:auto;
}
</style>
</head>
<body>
<form id="form1">
<div class="pg" id="rotator">
<img alt="" src="img/logo.png" />
<img alt="" src="img/aip.png" />
</div>
</form>
</body>
</html>Unfortunately, the above code did not achieve what I wanted.
I would appreciate any assistance!
If you have any codes that could help me center the image better, please share them with me.
I seem to be having trouble centering the image using my current code, so any guidance is greatly appreciated.
The CSS I am currently using is as follows:-
<style>
.pg{
top: 50%;
left: 50%;
position: absolute;
}
img
{
display:block;
margin:auto;
}
</style>