居中时如何堆叠两个img标签

Question

我正在尝试将两个 img 标签放在彼此上，但让它们都居中。

这是我尝试做的地方：http://nathanturnbull.me/scrolldiv/home.html

HTML：

<div id="divs" class="div1">
    <div class="textcont">
        <img class="imglogo" src="gpk.gif" alt="GPK NET">
        <div class="textcont" >
            <img class="imgbutton" src="gpk.gif">
        </div>
    </div> 
</div>

CSS：

#divs, #div4 {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    font-family: 'Cousine';
    font-size: 80px;
    color: #ffffff;
    text-align: center;
}

.div1 {
    display: table;
}

.textcont {
    display: table-cell;
    vertical-align: middle;
    background-color: transparent;
}

.imgbutton {
    height: 42px;
    width: 84px;
}

Answer 1

.container {
    text-align: center;
}

.container IMG {
    display: inline; /* browser default */
}

或

IMG {
    display: block;
    margin: 0 auto;
}

您的图片应在其容器内水平居中。

Answer 2

从.textcont CSS 类中删除display:table-cell; 语句。

See example.