Question

我有这个特殊的问题。我正在动态加载图像，并且每个图像都有不同的高度。我希望图像垂直位于容器的中间位置。以下是html的结构

<div class="item">
<div class="photo">
<img />
</div>
<div class="text"></div>
</div>

如果有可能使用jquery或css，请告诉我。 .photo的高度是140px;

Answer 1

方法1：CSS背景

如果div.photo具有固定的宽度和高度，请移除<img />元素并将style="background:url("http://example.com/pic.png") no-repeat scroll 50% 50%;"添加到特定div，或替换{{1元素依据：

<img />

图像现在将垂直居中。但是，当图像太大时，图像不会缩小。

方法2：CSS + HTML

见Fiddle。照片将居中，并垂直对齐。

HTML：

<div style="height:100%;width:100%;background:url(&quot;http://example.com/pic.png&quot;) no-repeat scroll 50% 50%;"></div>

CSS：

<div class="photo">
    <div class="middle-photo">
        <div class="center-photo">
            <img src="http://files.fosswire.com/2008/04/ubuntu_logo.png" />
        </div>
    </div>
</div>

Answer 2

您可以通过两种方式完成此操作：

使用javascript确定窗口大小等

或者您可以将其放在表格中并使用vertical-align属性

我最后的建议是使用Js并计算margin-left＆amp; margin-top属性。

使用jquery或css的垂直中心图像

2 个答案:

方法1：CSS背景

方法2：CSS + HTML