Question

我真的很难理解CSS中的一些内容，我认为这应该很简单。我想使用jquery将图像的div大小为50x50像素的内容更改为文本内容。内容交换正常，但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类交叉，然后从line-height: 0px;

中删除#crosses

Answer 2

这是工作小提琴 https://jsfiddle.net/6zkLvLeg/1/

将以下代码添加到ur .cross

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

Div与文本与图像的CSS位置/维度

2 个答案: