Question

我有一个div，里面有一些图像。如果我通常把它们对齐，我需要在中心对齐方式中显示它们。

图像是动态的，可能是小或大。我需要在各种条件下将它们显示在中间。

我怎么能用css做到这一点。任何诀窍

Answer 1

使用此：

img {
  margin-left:auto;
  margin-right:auto;
  display: block;
}

以下是示例页面：

<!DOCTYPE HTML>
<html lang="en-EN">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style type="text/css">
  #container {
    background-color: yellow;
    width: 500px;
    height: 300px;
  }
  img {
    margin-left:auto;
    margin-right:auto;
    display: block;
  }
  </style>
</head>
<body>
  <div id="container">
    <img  src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
  </div>
</body>
</html>

无论如何，你必须在所有浏览器中尝试它，我不确定它是否适用于所有浏览器。

使用CSS将内容置于HTML中是最痛苦的事情之一。

Answer 2

您可以尝试将样式text-align: center应用于div。

Answer 3

我需要将图片放在水平中心，您可以使用text-align: center容器上的div，如图所示here

但是如果您需要将图像设置为水平和垂直中心，那么使用背景样式属性可以很容易地执行here

我如何在div中间显示我想要使用CSS的图像

3 个答案: