javascript - 如何强制元素在中间？

Question

我正在使用以下代码来显示一些图像，但我不知道如何将它们移动到中间。有人知道吗？

CSS

.cover-image{
        max-width: 300px;
        max-height: 250px;
    }

HTML

<div class="row" id="covers">
        <div class="col-xs-6 col-sm-4">
            <div class="cover" style="margin-bottom: 10px;">
                <a target="_blank"><img class="cover-image" /></a>
            </div>
        </div>
    </div>

JS

$.ajax({
        type : 'GET',
        dataType : 'json',
        url: 'data.json',
        success : function(data) {
        var data = data.info;
        var covers = document.getElementById("covers");
        var blockTemplate = covers.getElementsByTagName("div")[0].cloneNode(true);
        covers.getElementsByTagName("div")[0].remove();
        data.forEach( function(obj) {
            block = blockTemplate.cloneNode(true);
            block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
            block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
            covers.appendChild(block);
        });
        $("img").css({"vertical-align":"middle"});
    }
});

现在显示的演示在这里:http://tdhtestserver.herobo.com/test/

Answer 1

试一试

这是你想要的吗

必须使用伪CSS

.cover {
border:1px solid;
height:200px;
width:200px;
vertical-align: middle;
text-align: center;}

.cover:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}


 .cover-image {
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: middle;  

}

这可能会使问题更清楚。

Fiddle Demo