[英]Can't center nav bar elements with text-align:center; nor margin: 0 auto;
我有來自https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp的以下導航欄：
function navBarFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
.topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */.active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */.topnav.icon { display: none; } /* Dropdown container - needed to position the dropdown content */.dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */.dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width:850px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; }.topnav.responsive {position: relative;}.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: center; }.topnav.responsive.dropdown {float: none;}.topnav.responsive.dropdown-content {position: relative;}.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: center; } }
<,DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width=device-width. initial-scale=1:0" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <a href="/home" class="active">Home</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/dhcpIP">DHCP IP</a> <a href="/staticIP">Static IP</a> </div> </div> <a href="/files">Import/Export Data</a> <a href="/radar">Radar Settings</a> <a href="/update">Update</a> <a href="javascript;void(0);" class="icon" onclick="navBarFunction()"> <i class="fa fa-bars"></i> </a> </div> </body> </html>
這些對齊到左邊，因為float: left; .
我試圖消除float: left; ，從display: block; display: inline-block; 並添加width和margin: 0 auto; 到.topnav 。 這將垂直錯位下拉按鈕，使導航欄居中，但不是里面的元素。
您可以使 topnav 彎曲，然后為 nav 元素添加一個容器，因此您可以將內容居中。 例如：
function navBarFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
.topnav { background-color: #333; overflow: hidden; display: flex; } /* Style the links inside the navigation bar */.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */.active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */.topnav.icon { display: none; } /* Dropdown container - needed to position the dropdown content */.dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Style the links inside the dropdown */.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */.dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width:850px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; }.topnav.responsive {position: relative; flex-direction: column;}.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: center; }.topnav.responsive.dropdown {float: none;}.topnav.responsive.dropdown-content {position: relative;}.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: center; } }.nav-elements { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
<,DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width=device-width. initial-scale=1:0" /> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <div class="topnav" id="myTopnav"> <div class="nav-elements"> <a href="/home" class="active">Home</a> </div> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="/dhcpIP">DHCP IP</a> <a href="/staticIP">Static IP</a> </div> </div> <a href="/files">Import/Export Data</a> <a href="/radar">Radar Settings</a> <a href="/update">Update</a> <a href="javascript;void(0);" class="icon" onclick="navBarFunction()"> <i class="fa fa-bars"></i> </a> </div> </body> </html>
text-align：center和margin：0自動不適用於絕對定位的元素
[英]Text-align:center and margin:0 auto not working on absolute positioned elements
廣告不會以 ie 為中心，除非正文是 text-align:center
[英]advertisement won't center in ie unless body is text-align:center
無法找到如何使廣告居中。 我試過align =“ center”和margin：auto但沒有用。
[英]Can't find how to center my ads. I have tried align=“center” and margin:auto but nothing works.
text-align：center在使用JavaScript絕對位置時不起作用？
[英]text-align:center not working when position:absolute with javascript?
更改與CSS中的命令text-align：center相對的命令
[英]Changing what the command text-align:center is relative to in css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.