CSS/HTML: element that is centered wont center right

Question

If you check this:

http://jsfiddle.net/QbMmX/1/

Then you can see that the box(div element) is moving more at the left than the text. It doesnt get center like the text does. Why is this occuring and how can i fix this?

Answer 1

Take a look at this modified version of jsfiddle:

http://jsfiddle.net/QbMmX/4/

I have added a background-color to both the right and left elements to help you visualize the result and reason why the centering was not happening the way you wanted. This seems to work in chrome.

Hope this helps.

Bob

Answer 2

#recentStatus is centering as you're expecting as a result of its display: inline style.

So if you add display: inline-block to .userStatusComment, it'll center similarly to the other elements.