html - 使用css在div中居中图像

Question

我正在使用 JSSOR 图片库，目前它正在拉伸(stretch)肖像图片。

我制作了一个不再拉伸(stretch)的 css 类:

但是我无法让图像在 div 中居中。

<div>
    <div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg">&nbsp;</div>
    <div u="thumb"></div>
</div>

这是CSS吗？

.portrait {
position: relative;
width: 850px; 
height: 565px;
background-repeat: no-repeat;
text-align: center;
}

如何让图片居中？

Answer 1

您正在使用 div 中的图像作为背景。

几乎任何元素都有一个名为:background-position 的属性，它可以将 center 作为值，使给定的图像从元素居中。

所以它可能是这样的:

.portrait {
    ...
    background-position: center;
}