Question

我想将这4张图片放在中心位置。水平它是工作但垂直它不起作用。有谁知道如何解决这个问题？目前我有一个黑色页眉/页脚部分，其中4个图像水平居中。一切都是可扩展的，但不是图像的高度。

我做得对吗？

HTML：

<section>
    <div class="pic">
        <img src="img.png" alt="Pic" />
    </div>
    <div class="pic">
        <img src="img.png" alt="Pic" />
    </div>
    <div class="pic">
        <img src="img.png" alt="Pic" />
    </div>
    <div class="pic">
        <img src="img.png" alt="Pic" />
    </div>
</section>

CSS：

body {
    margin:0;
    padding:0;
    max-width: 100%;
    max-height:100%;
}
section {
    position:absolute;
    top:5%;
    bottom:5%;
    left:0;
    width:100%;
    height:90%;
}
section img {
    width:12.5%;
    float:left;
    margin-left:10%;
}

Answer 1

假设图像的宽度等于图像的高度（就像您提供的代码一样），您可以使用margin-top的{{1}}。那看起来像是

50% - imageHeight

Demo

如果不是，您可以使用this pure CSS approach

Answer 2

您可以提供position:relative;部分，然后使用图片进行操作。

下面的示例使它们以剖面为中心，如果你想让图像展开但是垂直对齐，你需要在包含元素上做这个技巧（比如在图片中潜入图片：

section {
    position:relative;
    top:5%;
    bottom:5%;
    left:0;
    width:100%;
    height:90%;
}
section img {
    /*width:12.5%;
    float:left;
    margin-left:10%;*/
    position:absolute;
    top:50%;
    margin-top:-25%;/* should be half the height of the image */
    left:50%;
    margin-left:-25%;/* should be half the width of the image */
}

Answer 3

我认为更容易将图像包装在容器中然后将容器放在容器的父容器中，在这种情况下，您可以使用Article标签将图像包装起来，然后将该文章放在像这样的部分中心

HTML

<section>
    <article>
        <div class="pic">
            <img src="img.png" alt="Pic" />
        </div>
        <div class="pic">
            <img src="img.png" alt="Pic" />
        </div>
        <div class="pic">
            <img src="img.png" alt="Pic" />
        </div>
        <div class="pic">
            <img src="img.png" alt="Pic" />
        </div>
    </article>
</section>

CSS

html, body {
    height: 100%;
    width: 100%;
}

section {
    top: 5%;
    left: 0%;
    width: 100%;
    height: 90%;

    /* strech */
    overflow: hidden;
}

article {
    width:80%;
    height:40%; /* change this to set height */

    /* CSS absolute center begin */
    border: 2px solid #0000ff;
    margin: auto;
    position: absolute;
    display: inline-block;

    top: 0;
    bottom: 0;
    left:0;
    right:0;
    /* CSS absolute center end*/
}

.pic {
    position: relative;
    float: left;
    width: 12.5%;
    height: 100%;
    margin-left: 10%;
}

.pic img{
    position: relative;
    width:100%;
    height:100%;
}

希望对你有帮助

定位垂直中心

3 个答案: