Incorrect vertical alignment in WebKit of inline elements

Question

I have a small definition list that I would like to center on the page both horizontally and vertically in four columns. I have the html -element set to display: table and the body to display: table-cell; with vertical-align: middle; .

See this Fiddle . If you change the font-size on line 27 to 4em; (or anything larger than 1em ), you will see that on Chrome the content jumps to the wrong position, while it was correct before. On IE the font-size does not matter, it stays in the correct position either way.

If you set the dl to display: block , it works on both browsers as well but I visually need them to be displayed inline.

Am I doing something wrong or is this a bug in Chrome. If so, how can I work around it?

Answer 1

Add

vertical-align: top;

to your dl. Check here http://jsfiddle.net/qVcLE/6/ . Unfortunately display: inline; etc causes that type of issues.