I've got a bit of css that is centering my content vertically and horizontally in web browsers, but the horizontal centering disappears when viewed on a samsung tablet, and sits flush left.

here's what I've got so far:

Code:

#content {
    display: block; 
    height: 100%;
    position:absolute;
    width:100%;
}

.container { 
    width:974px; 
    height:530px; 
    margin:0px auto; 
    border:0px solid #000; 
    position:relative; 
    top: 50%;
    margin-top: -265px;

}

Recommended Answers

All 4 Replies

I'm not well-versed in mobile dev -- Is there any reason for the absolute positioning on #content?

I put that in to get the content vertically centered, I believe. If I take it out, the content is flush to the top, and on tablets, there are quite a few wierd screw-ups that appear.

I would think the vertical centering would be accomplished by the relative position along with the top and margin-top properties on .container.
What if on #content you set:

position: relative;
top: 0;

See if that might help?
If that doesn't do it, can you share your HTML, as well as which android OS and browser you're testing?

unfortunately, I get the same result. Vertically, I things are working fine in all browsers/platforms. It's just the horizontal positioning that breaks down.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.