我有一个导航栏，该导航栏的中央有4个锚标记按钮（家庭，关于，服务，联系人）。我不知道如何在导航栏上居中。我在导航栏的最左侧（电话号码链接）还有另一个锚标签。我要居中的部分似乎位于该最左边链接的边界和页面最右边之间的中心。
我不知道如何将这4个标签放在网格的中心。
希望是行得通的，我对行话不太满意。
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<a href="#" class="nav-icon cart button no-page-fade"><span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span></a>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
<a href="#" class="product-remove icon-cancel"></a>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
<a href="#" class="product-remove icon-cancel"></a>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
<a href="#" class="product-remove icon-cancel"></a>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
<a href="cart.html" class="view-cart">View Cart</a>
<a href="checkout.html" class="checkout button small"><span class="icon-check"></span> Checkout</a>
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<a href="#" class="nav-icon search button no-page-fade"><span class="icon-magnifying-glass"></span></a>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<a href=""><i class="fab fa-facebook-f"></i></a>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
<li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
<li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
<li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
答案 0 :(得分：0)
您可以使用浮点数在页面上并排放置元素，然后使用宽度和填充来按自己的喜好排列它们。如果您不确定如何使用CSS，建议您参考一些在线教程。
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><a href="#"><i class="fas fa-phone"></i><br><span>Contact</span></a></li>
<li><a href="#"><i class="fas fa-wrench"></i><br><span>Services</span></a></li>
<li><a href="#"><i class="fas fa-at"></i><br><span>About</span></a></li>
<li><a href="#"><i class="fas fa-home"></i><br><span>Home</span></a></li>
</ul>
</div>
</nav>
答案 1 :(得分：0)
此模板附带了很多现有的CSS。对我来说，运行您的CSS和html会改变太多的属性，使其无法识别。尽管如此，这是一个完美的答案。但是：我接过你的CSS：
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
我将其更改为以下值：
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
它居中。但是现在容器在垂直方向上是巨大的。需要它的原始高度
答案 2 :(得分：0)
好，让我们重新开始。我只想将这4个锚标签li放在此ul的中心。
是否有办法将这四个容器包装到一个容器中，然后使用CSS将它们移至左侧？我只希望这4个项目出现在该ul的中心。
Heres a picture of what im talking about
下面是我的HTML总标题。有很多CSS，所以我不知道该如何与人们联系起来，但是会把我一直在玩的东西放在下面。
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
<li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
<li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
<li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
--- CSS ---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}