CODEWITHSUNDEEP
htmlcss
user7956368
user7956368

Reputation:

Image at center

I am coding a website in which I want the image to be in the center at all size of screens.

I tried:-

<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>

The above code couldn't give me success.

Please help me out!

Please share your codes for the same.

I am not able to center the image with my code so please help me out.

CSS is:-

<style>
    .pg{
  top: 50%;
  left: 50%;
  position: absolute;
    }
    img
{
  display:block;
  margin:auto;
}
    </style>

Upvotes: 2

Views: 113

Answers (3)

Nithin Charly
Nithin Charly

Reputation: 305

if you want to display horizontally and vertically center try this: i have put height,width and border to make it more understandable. for different screen sizes you have to specify image width accordingly using media query.

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);
        };
.pg {
    display:flex;
    align-items:center;
    justify-content:center;
    height:200px;
    border: 1px solid red;
    
}
img {
       width:80px;
    }
    <form id="form1">
    <div class="pg" id="rotator">
      <div class="img" id="rotator">
        <img alt="" src="https://i.sstatic.net/pBxRp.png" />
        <img alt="" src="https://i.sstatic.net/5GIJP.png" />
      </div>
    </div>
    </form>

Upvotes: 1

Boky
Boky

Reputation: 12084

Add text-align: center; to pg class and add margin: 0 auto; to the img tags.

.pg {
  text-align: center;
}

.pg img{
  margin: 0 auto;
}

Here is a fiddle.

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

try this code

    img
    {
      display:block;
      margin:auto;
      max-width:100%;
    }

all images are center aligned.

Upvotes: 0

Related Questions