如何使用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 here.

---

<强> CSS：

.HorizLinks  {
  text-align:center;
}

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

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