如何在 CSS 中将标题链接居中？答案

【问题标题】：How do i center a header link in CSS?如何在 CSS 中将标题链接居中？
【发布时间】：2012-08-24 13:25:12
【问题描述】：

所以我在 CSS 中设计了一个网站，并试图将我的导航栏（带有链接的标题）居中，但是当我使用“文本对齐：中心”和“边距：自动”属性时，它不起作用。这是我的 HTML 文件代码：

<html>
  <head>
    <meta http-equiv="Content-Type"
         content="text/html;charset=ISO-8859-1">
    <title>Brickwood Fire Dept. - Established 2008</title>
    <link type="text/css"
         rel="stylesheet" href="main_style.css" media="screen"
  </head>
<body>
  <h1>
    Brickwood Fire Department
  </h1>
  <h2>
    Established 2008
  </h2>
  <h3>
    <a class = "home" href = "http://www.brickwoodfiredept.weebly.com">Home</a>
    <a href = "http://www.brickwoodfiredept.weebly.com/contact-us">Contact</a>
    <a href = "http://www.brickwoodfiredept.weebly.com/media.html">Media</a>
    <a href = "http://www.brickwoodfiredept.weebly.com/links">Links</a>
    <a href = "http://www.brickwoodfiredept.weebly.com/newsletter">Newsletter</a>
  </h3>
</body>
</html>

这是我的 CSS 代码：

a {
  color : white ;
  background : #32C1DA ;
  width : 30% ;
  text-align : center ;
  font-family : Arial ;
  font-size : 150% ;
  margin : auto ;
  word-spacing : normal
}

其余的 CSS 代码被省略以节省空间。

【问题讨论】：

标签： css

【解决方案1】：

尝试将 text-align 放在 h3 标签而不是 a 标签上。

h3 { text-align:center; }

【讨论】：

【解决方案2】：

最简单的答案是：

h3 {
    text-align:center;
}

【讨论】：

【解决方案3】：

类似的东西 h3 { 宽度 : 30% ;文本对齐：居中； } 一个{颜色：白色；背景：#32C1DA；宽度：30%；文本对齐：居中；字体- 家庭：宋体；字体大小：150%；边距：自动；字间距：正常 }

【讨论】：

【解决方案4】：

尝试添加

display:block;

到你的CSS

【讨论】：

唯一的问题是我希望它们像这样布置：“Home Blah Blah Blah Blah”。

【解决方案5】：

您需要在父级（h3 标签）上使用margin:auto;，在子级（a 标签）上需要text-align:center;。

【讨论】：

非常感谢！这行得通。我认为菲利普是想说这个，但没有正确用词。非常感谢！
@user1621272 您可以点击有用答案上的向上箭头以及您认为正确答案旁边的复选标记。