Robin Robin - 1 year ago 74
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.


margin: 20px auto;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')

line-height: 0;
position: relative;
top: 50px;
left: 50px;



display: inline-block;
width: 50px;
height: 50px;

I've made a fiddle here.

Answer Source

Here is the working fiddle

Add the following code to ur .cross

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