CSS：在任何移動屏幕中居中導航

我想讓'tinynav'移動屏幕的導航出現在任何設備的中心。CSS：在任何移動屏幕中居中導航

在這種情況下，我正在iPhone 4s和5上測試。我可以在肖像模式下完成此操作，但不能在橫向模式下完成。我相信這是因爲這兩個設備與縱向模式共享相同，但不是橫向模式。

媒體查詢使用：

/*iPhone 5 landscape*/

@media只有屏幕和（最小 - 設備寬度：481px）和（MAX-設備寬度：568px）和（-webkit分鐘設備像素-ratio：2）和（方向：橫向）{

#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只有屏幕和（最小 - 設備寬度：320像素）和（MAX-設備寬度：480像素）和（方向：橫向）{

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

我也嘗試過使用已知的媒體查詢POR iPhone 5的景觀：

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

，但沒有運氣，因爲「保證金左：自己之間，如果我不使用％重要替代！重要的是，那麼命令不會被瀏覽器渲染。

所以我需要一個CSS，它會自動以爲中心。

我也試過：

{保證金左：自動;} { 保證金右：自動}

但沒有任何結果。

這裏，如果你定義了DIV的寬度fiddle

來源

2014-02-13 Gonpires

HTML {高度：100％;寬度：100％;顯示：表;}和身體{顯示：表細胞;垂直對齊：中部;文本對齊：中心;}應該basicly工作，沒有？ –

margin-left auto; 
margin-right:auto;

會工作。

來源

2014-02-13 17:26:04 Hasan

使用此：

.tinynav { 
display: block; 
padding: 0; 
border: 1px solid #000; 
margin:0 auto; 
width:200px; 
}

來源

2014-02-13 17:46:45

它已上傳，但無法正常工作。@ Erico Augustin – Gonpires

是否使用我最新的CSS粘貼到jsfiddle上的聊天框中？檢查這個ss http://dovestones.wpengine.com/select_test/test2.html我用螢火蟲調整它 –

它已上傳到我的網站，但問題依然存在。 @Erico Augustin – Gonpires

您可以居中它沒有通過使.tinynav位置絕對設置像素寬度。

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

div { 
    position:relative 
    border:1px solid black; 
    height:568px; 
}

來源

2014-02-13 17:49:34 mrdeleon

剛試過這個，但它不適用於我真正的iphone 5，也不適用於iphone 4模擬器。 @mrdeleon – Gonpires

CSS：在任何移動屏幕中居中導航

回答

相關問題