Question

我的项目文章/教程列表存在问题。

Scenario（图片可以是其他尺寸而不是256x256，但必须是正方形，不能使用背景技巧，因为我在服务器上使用把手，图片不需要与position: absolute）

Answer 1

.tutorial {
    background-color: #ccc;
    position: relative;
    img {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto 0;
    }
...

在

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 0;

是使它垂直居中的原因。

position: relative;上的.tutorial是img垂直居中的原因。否则它会在屏幕上垂直居中。

Answer 2

您可以通过更改img css来修复它：

img {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        float: left;
    }

为：

img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 50px;
        height: 50px;
        float: left;
    }

添加position: relative，top:50%和变换：translateY(-50%)是一种非常有效的方法，可以垂直居中。

Answer 3

JS的另一个解决方案。

<html>
    <body>
        <div class="tutorial" id="tutorial">
            <img src="http://www.iconshock.com/img_jpg/BETA/mail_icons/jpg/256/template_icon.jpg" alt="image" id="img"/>
            <div class="text">
                <header>
                    <h1>lorem ipsum</h1>
                    <span>
                        by: who knows?
                    </span>
                </header>
                <p>
                    description bla bla bla bla
                </p>
            </div>

        </div>
    </body>
</html>

JS-part：

var tutorialId = document.getElementById("tutorial");
var heightTutorial = tutorialId.offsetHeight;
var imgId = document.getElementById("img");
var heightImg = imgId.offsetHeight;
var margin = (heightTutorial-heightImg);
imgId.style.marginTop=margin/2+'px';

如果之后更改了教程的高度，则必须再次调用JS。

如何在文章列表中垂直居中图像？

3 个答案: