css - 如何使用 CSS 使标题中的链接居中？

Question

我想让链接在屏幕上居中，而不是放在某个位置到一定数量的像素。

这是我的代码：

CSS：

.HorizLinks  {
    position: absolute; 
    top: 77px; 
    left: 180px;
}
.HorizLinks ul { 
    margin: 0px; 
}
.HorizLinks li {
    margin: 0px 15px 0px 0px;
    list-style-type: none;
    display: inline;
}

这是网页上的HTML：

<div id="container"></div>
<div id="header"></div>
<div class="HorizLinks">
<ul>
<li><a href="http://www.website.com">Header Link 1</a></li>
<li><a href="http://www.website.com">Header Link 2</a></li>
</ul>
</div>

Answer 1

text-align:center上使用<div class="HorizLinks">。此外，将ul元素的填充设置为0.

您对容器 div 的绝对定位是将整个 div 推到页面右侧的一侧，因此除非您将其删除，否则里面的内容将永远无法位于中间。

jsFiddle在这里。

---

CSS：

.HorizLinks  {
  text-align:center;
}

.HorizLinks ul { 
  margin: 0; 
  padding:0;
}

.HorizLinks li {
  margin: 0 15px 0 0;
  list-style-type: none;
  display: inline;
}