Question

我使用以下代码来显示一些图像，但我无法弄清楚如何在中间移动它们。有没有人有任何想法？

CSS

<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>

HTML

$.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"});
    }
});

JS

Vertex

现在展示的内容演示如下：http://tdhtestserver.herobo.com/test/

Answer 1

试一试

这就是你想要的吗

必须使用psuedo-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

Answer 2

如果您想对齐中间图像，可以将固定尺寸设置为.cover，并将max-width和max-height设置为a。然后，您可以使用绝对位置和css变换对齐a。例如：

.cover {
  width: 300px;
  height: 250px;
  position: relative;
}
.cover a {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 3

这是我在JSFiddle中尝试的内容：

http://jsfiddle.net/7w5fw7fw/

我将图像直接放入div容器中：

<div class="row" id="covers">
    <img src="http://sjhitsquad.net/wp-content/uploads/freshizer/3d142cc9444fe922cf69cf90e344ce5f_placeholder-920-350-c.gif">
    <img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
    <img src="https://www.adspeed.com/placeholder-123x456.gif">
    <img src="http://fpoimg.com/300x300?text=Advertisement">
    <img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
    <img src="http://fpoimg.com/300x300?text=Advertisement">
</div>

在一个单独的div中包装每一张图片对我来说并不吸引我。如果有这样的需要，那么最好使用<figure>，这是语义上的。

这是将图像放在中间的CSS：

html, body {
    height: 100%;
    margin: 0;
}

#covers {
    background: yellow;
    width: 100%;
    min-height: 100%;
    text-align: center;
}

img {
    max-width: 300px;
    min-height: 250px;
    vertical-align: middle;
}

背景颜色只是为了向您展示容器的宽度和高度（与整个身体元素一样多）。根据窗口宽度，图像可能全部出现在一行中或分成许多行。

这是否接近您的搜索行为？

Answer 4

你的问题不明确，但我想你想要这个尝试将此添加到您的身上

body {
  margin: auto !important;
}

如何强制元素在中间？

4 个答案: