Reply To: display: table – Where is this extra pixel coming from?

[fredrivett]

Hi Nathan,

I’ve found exactly the same issue! Trying to use % width’s on items that need to be vertically aligned to the middle is tricky. I guess the ghost element method could work (https://css-tricks.com/centering-in-the-unknown/) but I’ve had some issues with that at certain browser widths before so I’m a little wary.

One solution is to wrap everything in another div, give that the % width, then make the inner div display:table. That could work in some circumstances. Not so much for me though as I need my inner div to fill the entirety of the outer div. The inner div has exactly the same rounding problems due to the display:table making the gap on the inside, rather than the outside, which isn’t great as I need to do a full background fill on the inside div.

Anyway, I’m assuming you’re not still stuck on this problem, if you are I’m mightily sorry for you. Just thought I’d share your pain.

Cheers,
Fred.