Centering CSS display: table-cell;

[j05hr]

Hi

I’m using Chris’s method to vertically align an image inside a parent div. It all works fine apart from on mobile it won’t center on a mobile browser. I’m not sure if it works on IOS as I can only test on an Android device.

If I make the browser from a desktop the same size as the mobile browser it works fine so I can only assume display: table-cell is in some way defunct on mobile.

Does anyone have any experience of making this work for mobile?

Link to the page

Thanks

[Paulie_D]

Hmm…seems to be OK according to CanIUse.com : http://caniuse.com/#search=table-cell

Looking…

[Paulie_D]

Actually, it’s not centering the images on desktop either (Chrome 32).

The issue seems to be the class .bestSellerImg.

.bestSellerImg {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 195px;
height: 205px;
border: 1px solid #bfbfbf;
margin: 0 auto;
}

This is NOT centering the div inside the divs with a class of .bestSellerContainer [at least on desktop]. Changing the display mode to block DOES center the div but it stops the image being aligned vertically.

I’ll have to think some more…

[j05hr]

Yeah the function works as in it will center vertically but it won’t center to the page if that makes sense.

Link to desktop center.

Link to mobile center

Edit: Just seen your reply, that’s good to know it isn’t working in Chrome, I had only checked Firefox which was fine. It must be something in my responsive code then.

[Paulie_D]

One thing you could do is (for mobile) is change the .bestSellerImg width to 100%, change the display property to block and remove the border.

The image will center horizontally (but not vertically) but there would be no visual reference to seeing the the image is not aligned vertically…if you see what I mean.

[j05hr]

Yeah I was thinking of doing that, there isn’t many other options unless changing the whole approach. Am I right in thinking it’s that it doesn’t like the percentage width?

[Paulie_D]

I had only checked Firefox which was fine. It must be something in my responsive code then.

Hmmm…It could be how the media queries are structured. Are you using min and max widths, it didn’t look like it.

[j05hr]

Just max width. I’m not sure now if it’s browser specific or just an error on might part in the code.

[Paulie_D]

At a quick glance your media queries are overlapping

You have several max-widths but with no min-widths the largest would always apply.

I can’t be sure on the monitor I am using at the moment but Chrome is applying the @540px query and FF is not, it’s using the @1024px query (number approx).

[j05hr]

Even with them overlapping could that be the problem?

I think even at the desktop size it isn’t centered it just looks it because the images are so close to eachother.

[Paulie_D]

I think even at the desktop size it isn’t centered it just looks it because the images are so close to eachother

Exactly…unfortunately this might mean re-thinking the whole layout approach.

[Author]

Posts