0

I want to make the 'tinynav' mobile screen's navigation to appear in the center of any device.

In this case I'm testing on iPhones 4s and 5. I can accomplish this in portrait mode but not in Landscape mode. I believe this is because both devices share the same with in portrait mode, but not in Landscape.

Media queries used:

 /*iPhone 5 landscape*/

@media only screen and (min-device-width : 481px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio:2) and (orientation : landscape) {

#mainNav .tinynav {
display: inline-block;
padding: 0 !important;
right: 0;
border: 1px solid #000;
margin-left: 35% !important;
 margin-top: 7%;
}

/*iPhone until 4s landscape*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {

#mainNav .tinynav {
display: inline-block;
padding: 0 !important;
right: 0;
border: 1px solid #000;
margin-left: 51% !important;
margin-top: 7%;
}

I tried also using the known media query por iPhone 5 Landscape:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

But no luck, because the 'margin-left:% !important override between themselves and if I don't use !important, then the command is not rendered by the browser.

So I need a CSS that would make it to be centered automatically.

I've also tried:

{margin-left:auto;} {margin-right:auto}

But no results either.

Here's a fiddle

Gonpires
  • 93
  • 1
  • 14
  • html {height:100%;width:100%;display:table;} and body {display:table-cell;vertical-align:middle;text-align:center;} should basicly work, no ? – G-Cyrillus Feb 13 '14 at 17:07

3 Answers3

0
margin-left auto;
margin-right:auto;

will work if you define a width for the div.

Hasan
  • 1
  • 1
0

Use this : 

.tinynav {
display: block;
padding: 0;
border: 1px solid #000;
margin:0 auto;
width:200px;
}
Hendra Nucleo
  • 591
  • 4
  • 17
  • did u use my latest css i paste on chat box on jsfiddle? check this ss http://dovestones.wpengine.com/select_test/test2.html i've tweaking it using firebug – Hendra Nucleo Feb 13 '14 at 18:57
  • It's uploaded to my Site, however the problem remains. @Erico Augustin – Gonpires Feb 13 '14 at 19:02
  • It's even on the fiddle. It works there but not on my device or emulator. Probably because of the media queries used? Still the same css is present on each media query. – Gonpires Feb 13 '14 at 19:06
  • did u use laptop or pc now? download tamviewer and connect me i'll show you..i think there is something wrong with the code. – Hendra Nucleo Feb 13 '14 at 19:06
0

You can center it without a setting a px width by making the .tinynav position absolute.

.tinynav {
    width: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

div {
    position:relative
    border:1px solid black;
    height:568px;
}
mrdeleon
  • 465
  • 4
  • 13