中心我的文字在下拉菜單中

有問題，我能創造一個下拉菜單，但無法將文本居中。它的好像填充左側已設置，但我沒有設置它。我只需要幫助中心下拉菜單中的文字。 //下拉菜單中心我的文字在下拉菜單中

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .menu { 
     background-color:grey; 
     padding: 5px; 
    } 
    .menu li { 
     list-style:none; 
     padding: 3px; 
    } 
    .menu a { 
     text-decoration: none; 
     color: black; 
    } 
    .menu > li { 
     display:inline; 
    } 
    .dropmenu { 
     display:none; 
     float:right; 
     position:relative; 
     top:18px; 
     left:-422px; 
    } 
    .dropdown:hover > .dropmenu { 
     display:block; 
    } 
    .dropmenu { 
     background-color:grey; 
    } 


</style> 
</head> 
<body> 

<ul class = "menu"> 
<li><a href = "#">HOME</a></li> 
<li><a href = "#">ABOUT</a></li> 
    <li class = "dropdown"><a href = "#">SPORTS</a> 
    <ul class = "dropmenu"> 
    <li><a href = "#">NBA</a></li> 
    <li><a href = "#">NFL</a></li> 
    <li><a href = "#">MLB</a></li> 
    </ul> 
    </li> 
<li><a href = "#">CONTACTS</a></li> 
<li><a href = "#">BLOG</a></li> 
</ul> 

</body> 
</html>

來源

2015-06-02 chris

，你有沒有嘗試過調整嗎？ –

你在哪裏設置'text-align：center'？ –

首先，在下拉菜單使用text-align: center;。您的下拉菜單將顯得偏離中心，因爲默認填充和邊距是ul，您正在使用瀏覽器在默認情況下添加的下拉菜單。您將希望從下拉菜單ul中刪除該填充/邊距。

.dropmenu { 
    padding: 0; 
    text-align: center; 
}

如果執行此操作後下拉菜單變得太窄，您可能需要爲下拉菜單設置特定的寬度。

.dropmenu { 
    padding: 0; 
    text-align: center; 
    width: 100%; /* same width as containing li */ 
}

的jsfiddle：http://jsfiddle.net/7hjqjrjj/2/

如果你正在尋找清理閱讀下面的下拉菜單/修復對齊。

您想將position: relative;應用於包含下拉菜單的li。然後將position: absolute;應用到該下拉菜單（ul）。您通常會將left: 0;添加到下拉菜單（ul）中。

將position: relative;應用於包含li會導致絕對定位下拉菜單相對於包含li而不是頁面頂部的某個位置。

我們不想在下拉菜單中包含li內的錨標記或其他內容後，擺正自己的位置，所以我們使用絕對定位。

更新你的CSS選擇如下：

.menu li { 
    list-style: none; 
    padding: 3px; 
    position: relative; 
} 
.dropmenu { 
    display: none; 
    position: absolute; 
    top: 18px; 
    left: 0; 
}

您可能需要與您top和left值擺弄。

的jsfiddle：你在使用`left` http://jsfiddle.net/7hjqjrjj/1/

來源

2015-06-02 18:01:38 hungerstar

hungerstar，感謝您的提示，它的工作。我明白了一切，除了爲什麼絕對定位下拉菜單將相對於包含li定位本身。 – chris

絕對定位元素將相對於最接近的定位元素進行定位。在你的情況下，這是父'li'元素。如果沒有定位祖先元素，並且您絕對使用'top：0;'和'left：0;'定位了下拉菜單，則它們都將位於您網站的左上角，並堆疊在另一個的頂部。我們將'position：relative;'應用於父項，所以類似的事情不會發生。我們這樣做，它使用頁面中的父元素位置作爲參考點，以顯示它的位置。 – hungerstar

中心我的文字在下拉菜單中

回答

相關問題