如何在 html/css 中对齐“a”元素答案

【问题标题】：how to align an 'a' element in html/css如何在 html/css 中对齐“a”元素
【发布时间】：2013-03-15 12:42:36
【问题描述】：

我需要在中心对齐一个“a”元素

HTML 代码：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>

    <h1>Olive</h1>
    <a href="page1.html">Enter</a>

</body>
</html>

CSS 代码：

body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
}

a {
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
text-decoration: none;

}

我在 CSS 表的“a”元素中使用了“text-align”，但没有改变。

【问题讨论】：

标签： html css alignment center

【解决方案1】：

text-align:center; 使元素内的文本居中，当您将其应用于 <a> 时，您将在其中将 <a> 内的文本居中，但 <a> 是一个内联元素，它不会拉伸，所以你需要把它放在div中。

<div> <a> Ha </a> </div>

div{
text-align:center;
}

【讨论】：

【解决方案2】：

那是因为你不能text-align 一个内联元素，比如a 是默认的。试试这个：

a {
    display: block;
    text-align: center;
    /* ... */
}

【讨论】：

您不应该将内联元素转换为块来对齐它。使用 text-align 对齐内联子元素 (a) 并使用 float 对齐块子元素 (h1)！

【解决方案3】：

您需要在 父级（正文）上使用 text-align。这会对齐内联子级。

【讨论】：

【解决方案4】：

因为它是一个内联元素，一个元素应该总是嵌套在一个块元素中，不管任何样式问题。

例如：

<p>
  <a><a href="page1.html">Enter</a>
</p>

这样，您就可以使用类似于以下 CSS 规则的内容：

p > a { text-align: center; }

【讨论】：