如何强制元素位于中间

How to force elements to be in middle?

本文关键字：中间 于中间 何强制 元素      更新时间：2023-09-26

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

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/

只需尝试

这是你想要的吗

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

如果要对齐图像中间中心，可以将固定大小设置为.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%);
}

以下是我在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;
}

背景色只是为了显示容器的宽度和高度（与整个主体元素一样多）。根据窗口宽度的不同，图像可能全部显示在一行中，也可能分成多行。

这与你被搜查的行为接近吗？

你的问题不清楚，但我认为你想要这个试着在你的身体上添加这个

body {
  margin: auto !important;
}
相关文章：