css - 居中时如何堆叠两个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

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

见例子。