Question

我正在编写一个网站，我希望图像在所有尺寸的屏幕中都位于中心。

我试过了： -

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

上述代码无法给我带来成功。

请帮帮我！

请分享您的相同代码。

我无法使用我的代码将图像居中，所以请帮助我。

CSS是： -

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

Answer 1

如果要水平和垂直显示中心，请尝试以下操作：我把高度，宽度和边框放在一起使它更容易理解。对于不同的屏幕尺寸，您必须使用媒体查询相应地指定图像宽度。

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.stack.imgur.com/pBxRp.png" />
        <img alt="" src="https://i.stack.imgur.com/5GIJP.png" />
      </div>
    </div>
    </form>

Answer 2

试试这段代码

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

所有图像都居中对齐。

Answer 3

将text-align: center;添加到pg课程，并将margin: 0 auto;添加到img代码。

.pg {
  text-align: center;
}

.pg img{
  margin: 0 auto;
}

Here is a fiddle.

图像在中心

3 个答案: