CSS Position/Dimensions 共 Div 个文本与图像

Question

我很难理解 CSS 中的某些内容，在我看来应该很简单。我想使用 jquery 将大小为 50x50 像素的 div 的内容从图像更改为文本内容。内容交换正常，但是 div 的位置弄乱了，我就是不明白为什么。

编辑：搞砸了我的意思是当我检查元素时，正确大小的 div 被突出显示，但文本位于突出显示的框之外并且下部元素被替换。

$('.cross').html('?');

#island{
    margin: 20px auto;
    border-radius:10px;
    height: 500px;
    width: 500px;
    background: url('../images/island-500x500.png')
}

#crosses{
    line-height: 0;
    position: relative;
    top: 50px;
  left: 50px;
}

.crosses-row{

}

.cross{
    display: inline-block;
    width: 50px;
    height: 50px;
}

我做了一个fiddle here.

Answer 1

将 vertical-align: top; 添加到 css class cross 并从 #crosses[=13= 中删除 line-height: 0px; ]

Answer 2

这是工作 fiddle https://jsfiddle.net/6zkLvLeg/1/

将以下代码添加到您的 .cross

.cross {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
    text-align: center;
}

CSS Position/Dimensions 共 Div 个文本与图像

CSS Position/Dimensions of Div with Text vs Image

html

css

display