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

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

See example.

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

2 个答案: