我如何以我的菜單爲中心

我正在開發此主題：http://test.banglapdf.net/ 要移動我的導航菜單右側的頁面。我在我的wordpress菜單功能中添加了'container_class'=>'pull-right' 。但是當主題的最大寬度在767以下時，菜單看起來不太好。我想將它移動到頁面的中心。我爲我的響應式css文件添加了.pull-right {float：none;}，但它不起作用。我該怎麼辦？這裏是我的菜單的CSS：我如何以我的菜單爲中心

#main-nav { 
    margin-top: 65px; 
    float:right; 
    background: #e1a221; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e1a221 0%, #f5c25a 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1a221), color-stop(100%,#f5c25a)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #e1a221 0%,#f5c25a 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #e1a221 0%,#f5c25a 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #e1a221 0%,#f5c25a 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #e1a221 0%,#f5c25a 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1a221', endColorstr='#f5c25a',GradientType=0); /* IE6-9 */ 

} 
#main-nav li { 
    float: left; 
    list-style: none; 
    position: relative; 
    padding: 0.7em 1em; 
    transition: background 0.8s ease; 
} 
#main-nav li:hover { 
    background: #e2a529; 
} 
#main-nav li a { 
    color: #522504; 
    font: italic 1em "Marko One"; 
    box-sizing: border-box;; 
    text-align: center; 
    text-decoration: none; 
} 
#main-nav li a:hover { 
    color: #6a3107; 
} 

.current-menu-item, .current-page-item { 
    background: #d79a1e;  
} 


@media (min-width: 768px) and (max-width: 991px) { 
#main-nav { 
    margin-top: 65px; 
} 
#main-nav li a { 
    font-size: 0.9em; 
} 
#main-nav li { 
    padding: 0.4em 0.7em; 
} 
} 

@media (max-width: 767px) { 
.pull-right { 
    margin: 1em auto; 
    float:none; 
} 

}

來源

2014-04-17 Aohor Arsalan

請在問題本身發佈相關代碼。 – Kermit

如果你不想幫忙，不要幫忙。爲什麼給消極的聲譽？我沒有看到我的問題有任何問題。 –

請參閱[如何提問]（http://stackoverflow.com/help/how-to-ask）頁面以尋求澄清此問題的幫助。 – Kermit

-1

在你需要你的媒體查詢做到這一點：

@media (max-width: 767px) { 
#main-nav { 
    margin: 1em auto; 
    float:none !important; 
} 

#main-nav li { 
    float:none; 
    text-align:center;} 

}

地方約63行的你navigation.css使媒體查詢的樣子說。

來源

2014-04-17 19:34:02 JCBiggar

非常感謝您的幫助，現在正在開展工作。 :) –

歡迎你，很高興我能幫到你。 :) – JCBiggar

首先嚐試使用一些瀏覽器工具，如用於Firefox的Firebug。那麼你應該檢查哪些規則更重要。在你的案例規則中： .pull-right { float：right！important; } from bootstrap.css has！important property，所以你的'float：none'規則被覆蓋。

。如果您要居中你的水平菜單中有一個非常簡單的方法，另一方面 - 使用： UL {文本對齊：中心;} 李{顯示：inline-block的;}

來源

2014-04-17 19:23:54

我如何以我的菜單爲中心

回答

相關問題