为什么文本出现在CSS的底部？

Question

这是我的小提琴：http://jsfiddle.net/hbs9fc58/1/

* {
    margin: 0;
    padding: 0;
    font-size: 0;
    border-width: 0;
    font-family: Helvetica, Arial, Sans-Serif;
    color: rgb(50, 50, 50);
}

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

#popup {
    display: inline-block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #FFF;
}
#popup > div {
    display: inline-block;
    position: absolute;
    width: auto;
    height: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#popup > div > img {
    width: auto;
    height: 100%;
}
#popup > div > div {
    display: inline-block;
    font-size: 30px;
}

为什么＆＃34; Lorem Ipsum＆＃34;当文字出现在绿点时，文字会出现在红点上吗？

我现在已经尝试过这么多，我只是看不出问题？感觉CSS中的所有内容都可以，但显然它不是吗？

Answer 1

您需要为元素定义vertical-align，默认值为baseline，而不是top。

#popup div {
   display: inline-block;
   vertical-align: top
}

Answer 2

您有两个内联元素，因此它们将被放置在文本块的基线上。这意味着图像的底部将与文本的基线处于同一高度。

由于图片比文字大，您可以通过向文本块添加vertical-align: top;来将图片顶部与文本块中文本的顶部对齐。