问题
The top bar nav on my site is left aligned like this:
| Home | aveoTSD | Silent Nite |
I would like to center the top bar nav like this:
| Home | aveoTSD | Silent Nite |
Center it exactly like the red bar with "Example" text.
Here is my css.
回答1:
You can do it by adding this to your CSS (and preferably removing conflicting styles):
.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}
回答2:
Found this to be helpful: https://github.com/zurb/foundation/issues/1598
Set the container of the navigation to: text-align:center;
Then for the navigation itself, set the display to: display:inline-block;
Hope that helps!
回答3:
Here is the best solution I've found that works for all resize events. It centers the Foundation 5 Top-bar elements.
SCSS:
nav.top-bar:not(.expanded) {
text-align: center;
section.top-bar-section { display: inline-block; }
}
HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#"></a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul>
<li><%= link_to 'LINK 1', root_path %></li>
<li class="divider"></li>
<li><%= link_to 'LINK2', link_path %></li>
<li class="divider"></li>
<li class="has-dropdown">
<%= link_to 'Droping', "#" %>
<ul class="dropdown">
<li><label>Label:</label></li>
<li><%= link_to 'DROP 1', drop_path %></li>
<li class="divider"></li>
<li><%= link_to 'DROP 2', drop_path %></li>
</ul>
</li>
<li class="divider"></li>
</ul>
</section>
</nav>
回答4:
Using the above example, I make a few tweaks. The above centers everything. The adjustments below centers the topbar, left justifies the text on drop-downs and centers the "hamburger" / menu-icon when in mobile:
/* center topbar */
/* set alignment to center for small screens */
nav.top-bar { text-align:center; }
nav.top-bar:not(.expanded) {
text-align: center;
section.top-bar-section {
/* align drop down menu text to left on large screens */
text-align:left;
display: inline-block;
}
}
/* center the mobile hamburger menu */
.top-bar .toggle-topbar.menu-icon {
padding: 0;
right: 50%;
margin-right: -36px;
}
来源:https://stackoverflow.com/questions/16866734/how-do-i-center-the-zurb-foundation-top-bar-nav