Question

我有一段代码摘要，我需要在我的标题中居中（只是文本和实际的填充）。我是编码的新手，所以如果这听起来不对，请不要感到惊讶。这是我需要以列表项为中心的代码。尽量使您的答案尽可能像初学者一样。

CSS：

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: 0px;
    margin: 40px;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}

HTML：

<div id= "navcontainer">

<!-- BEGIN TABS -->
<ul>
    <a id="index" class="page-logo" href="/">
    <img src="slamlogo.png" alt="Logo">
    <li><a href="/Jackpot">Jackpot</a></li>
    <li><a href="/Profile">Profile</a></li>
    <li><a href="/Market">Market</a></li>
    <li><a href="/Support">Support</a></li>
</ul>

我知道李很乱，但我这样做，所以我可以看得更清楚。遗憾。

Answer 1

将text-align: center添加到<ul>：

#navcontainer ul {
  text-align: center;
}

<强>段

＆＃13;

#navcontainer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 23px;
  color: #800000;
  text-align: center;
}
#navcontainer ul li {
  display: inline;
}
#navcontainer ul li a {
  text-decoration: none;
  padding: 0px;
  margin: 40px;
}
#navcontainer ul li a:hover {
  color: #fff;
  background-color: #800000;
}

＆＃13;

<div id="navcontainer">
  <!-- BEGIN TABS -->
  <a id="index" class="page-logo" href="/">
    <img src="slamlogo.png" alt="Logo">
  </a>
  <ul>
    <li>
      <a href="/Jackpot">Jackpot</a>
    </li>

    <li>
      <a href="/Profile">Profile</a>
    </li>

    <li>
      <a href="/Market">Market</a>
    </li>

    <li>
      <a href="/Support">Support</a>
    </li>

  </ul>
</div>

＆＃13;

另外，在<li>内加<ul>以外的其他内容也不是一个好主意。您还省略了</a>。

Answer 2

你的标记中有一些错误，我已经为你修好了。如果您将列表项目作为内联元素进行定位，那么列表项目所需的所有内容都是text-align：center。

<div id= "navcontainer">
    <ul>
        <li>
            <a id="index" class="page-logo" href="/">
                <img src="slamlogo.png" alt="Logo">
            </a>
        </li>
        <li><a href="/Jackpot">Jackpot</a></li>
        <li><a href="/Profile">Profile</a></li>
        <li><a href="/Market">Market</a></li>
        <li><a href="/Support">Support</a></li>
    </ul>
</div>

#navcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Raleway', sans-serif;
    font-size: 23px;
    color: #800000;
    text-align: center;
}
#navcontainer ul li {
    display: inline;
}
#navcontainer ul li a {
    text-decoration: none;
    padding: 0px;
    margin: 40px;
}
#navcontainer ul li a:hover {
    color: #fff;
    background-color: #800000;
}

http://jsfiddle.net/ruLns221/

为了进一步解释这些更改，您应该只将li元素添加到无序列表（ul）中，以便我在列表项中嵌套您的徽标。我也关闭了一些未关闭的标签。

如何水平居中列表项？

2 个答案: