Question

所以我在CSS中设计一个网站，我试图将我的导航栏（带有链接的标题）居中，但当我使用“text-align：center”和“Margin：auto”属性时，它不起作用。这是我的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代码用于节省空间。

Answer 1

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

h3 { text-align:center; }

Answer 2

最简单的答案是：

h3 {
    text-align:center;
}

Answer 3

尝试添加

display:block;

到你的css

Answer 4

您需要父级（h3标签）上的margin:auto;和子级上的text-align:center;（标签）。

Answer 5

像这样的东西 h3 {宽度：30％; text-align：center; } 一个{颜色：白色;背景：＃32C1DA;宽度：30％; text-align：center;字体 - 家庭：Arial; font-size：150％;保证金：自动;字间距：正常}

如何将CSS中的标题链接居中？

5 个答案: