在div中居中100％动态图像

Question

在我正在尝试构建的响应式网站上将div中的100％图像集中存在一些问题。

尝试边距：自动和文字对齐：中心....

是否还有其他选项可以将图像置于div中，甚至div中。 div的实际宽度是否未指定？

<div class="hoods"><a href="http://example.com.com/hoods"><img    src="http://example.com.com/image/data/Home Page  /hoods.jpg" ></a></div>

.hoods {
float: left;
margin-bottom: 20px;
width: 96%;
}

.hoods > a > img {
border-style: solid;
border-width: 10px;
max-height: 236px;
max-width: 92.5%;
}

Answer 1

内联中心

如果您有一个应居中的图像，那么您可以通过两种方式完成。仅适用于内嵌图片，包含动态width和height。您可以执行以下操作：

＆＃13;

＆＃13;

.center-image {text-align: center;}
.center-image img {display: inline-block;}

＆＃13;

<div class="center-image">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

预览

死亡中心（完全以整个窗口为中心）

如果你想做一个死角，那么你可以使用translate()：

＆＃13;

＆＃13;

.center-image {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.center-image img {display: inline-block;}

＆＃13;

<div class="center-image">
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

预览