如何集中“位置：相对” - 导航栏？

Question

如何将p1 p2 c1 c2 c3 c4 c5 mpg spd 43 0.4 23 87 23 mpg wt 76 23 19 43 12 属性设置为position的导航栏居中？这是this website。

我找到了几种解决方案，但这需要我将导航栏的relative更改为position。我不能这样做，因为它破坏了导航栏的entiry css风格！

absolute

body header .bottom-header {
	border-radius: 15px 0 0 0;
	width: 100%;
	height: 125px;
	background: linear-gradient(to right, #381107, #993013, #FF5221);
	text-align: center;
	
}
body header .bottom-header ul {
	position: relative;
	top: 32%;
	list-style-type: none;
    margin: 0;
    padding: 0;
}
body header .bottom-header ul li a {
	transition: all .4s ease;
	color: rgba(255, 255, 255, 0.4);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
}
body header .bottom-header .button {
	transition: all .4s ease;
	display: block;
	float: left;
	top: 40px;
	margin: auto;
	min-width: 13%;
	max-width: 13%;
	padding-top: 8px;
	padding-bottom: 8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	margin-left: 0.4%;
	margin-right: 0.4%;
	cursor: pointer;
}
body header .bottom-header .button:hover {
	border: 2px solid rgba(255, 255, 255, 0.7);
}
body header .bottom-header .button:hover a {
	color: rgba(255, 255, 255, 0.7);
}

我所做的工作（实际上这不是一个好的解决方案）是，我根据页面的总宽度更改导航栏两侧的边距。就像你可以看到你是否看过我之前链接的页面的CSS。谢谢！

Answer 1

让ul相对定位inline-block并使用margin: 0 auto;将其置于中心位置。并清除width元素/按钮中的所有li设置，以便它们可以具有文本内容所需的宽度：

.bottom-header {
  border-radius: 15px 0 0 0;
  width: 100%;
  background: linear-gradient(to right, #381107, #993013, #FF5221);
  text-align: center;
}

.bottom-header ul {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  list-style-type: none;
  padding: 0;
}

.bottom-header ul li a {
  transition: all .4s ease;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.bottom-header .button {
  transition: all .4s ease;
  display: block;
  top: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  cursor: pointer;
}

.bottom-header .button:hover {
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.bottom-header .button:hover a {
  color: rgba(255, 255, 255, 0.7);
}

<div class="bottom-header">
  <ul>
    <li class="button" id="top" onclick="window.location='hem.html';"><a href="hem.html">Hem</a></li>
    <li class="button" id="top" onclick="window.location='om.html';"><a href="om.html">Om Mango</a></li>
    <li class="button" id="top" onclick="window.location='filosofi.html';"><a href="filosofi.html">Filosofi</a></li>
    <li class="button" id="top" onclick="window.location='personal.html';"><a href="personal.html">Personal</a></li>
    <li class="button" id="bottom-start" onclick="window.location='kontakt.html';"><a href="kontakt.html">Kontakt</a></li>
    <li class="button" id="bottom" onclick="window.location='hitta-hit.html';"><a href="hitta-hit.html">Hitta hit</a></li>
    <li class="button" id="bottom" onclick="window.location='bostaderna.html';"><a href="bostaderna.html">Verksamheterna</a></li>
  </ul>
</div>

如果您希望按钮水平对齐（即不在您发布的代码中），请将diplay: inline-block标记为li元素，也可以使用固定的min-width设置：

.bottom-header {
  border-radius: 15px 0 0 0;
  width: 100%;
  background: linear-gradient(to right, #381107, #993013, #FF5221);
  text-align: center;
}

.bottom-header ul {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  list-style-type: none;
  padding: 0;
}

.bottom-header ul li a {
  transition: all .4s ease;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.bottom-header .button {
  transition: all .4s ease;
  display: inline-block;
  min-width: 90px;
  top: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  cursor: pointer;
}

.bottom-header .button:hover {
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.bottom-header .button:hover a {
  color: rgba(255, 255, 255, 0.7);
}

<div class="bottom-header">
  <ul>
    <li class="button" id="top" onclick="window.location='hem.html';"><a href="hem.html">Hem</a></li>
    <li class="button" id="top" onclick="window.location='om.html';"><a href="om.html">Om Mango</a></li>
    <li class="button" id="top" onclick="window.location='filosofi.html';"><a href="filosofi.html">Filosofi</a></li>
    <li class="button" id="top" onclick="window.location='personal.html';"><a href="personal.html">Personal</a></li>
    <li class="button" id="bottom-start" onclick="window.location='kontakt.html';"><a href="kontakt.html">Kontakt</a></li>
    <li class="button" id="bottom" onclick="window.location='hitta-hit.html';"><a href="hitta-hit.html">Hitta hit</a></li>
    <li class="button" id="bottom" onclick="window.location='bostaderna.html';"><a href="bostaderna.html">Verksamheterna</a></li>
  </ul>
</div>