Robin Robin - 3 months ago 15
CSS Question

CSS Position/Dimensions of Div with Text vs Image

I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.

EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.

$('.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;
}


I've made a fiddle here.

Answer

Here is the working fiddle https://jsfiddle.net/6zkLvLeg/1/

Add the following code to ur .cross

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